04.04.2023, 07:02
|
|
Аспирант
|
|
Регистрация: 07.05.2019
Сообщений: 38
|
|
|
Есть ли способ сократить запись?
Есть к примеру фейковый массив который к примеру получен с базы данных :
|
Код:
|
let obj = [{ name: "", average: "", cpu: "", price: "",},{ name: "", average: "", cpu: "", price: "",},{ name: "", average: "", cpu: "", price: "",},{ name: "", average: "", cpu: "", price: "",}] |
И на выходе после каких то методов надо получить вот такое
|
Код:
|
<div data-name="" data-average="" data-cpu="" data-price=""></div> |
Я разумеется делаю это вот таким способом :
|
Код:
|
for(const inf of obj){
let d = document.createElement("div");
d.setAttribute("data-name", inf.name);
d.setAttribute("data-average", inf.average);
d.setAttribute("data-cpu", inf.cpu);
d.setAttribute("data-price", inf.price);
console.log(d)
} |
Вот именно вот это меня напрягает, есть ли способ в javascript который позволит не писать 100500 раз d.setAttribute (в случае если всё таки будет не 4 поля а скажем больше 20 или 30) как это написать сокращённо ... ? |
|
04.04.2023, 07:10
|
 |
Тлен
|
|
Регистрация: 02.01.2010
Сообщений: 6,492
|
|
Способ называется цикл, лол.)
for(const inf of obj){
let d = document.createElement("div");
for(const key in inf){
d.setAttribute("data-" + key, inf[key]);
}
console.log(d);
}
или
let divs = obj.map(inf => {
let d = document.createElement("div");
Object.entries(inf).forEach(
([key, value]) => d.setAttribute(`data-${key}`, value)
);
console.log(d);
return d;
});
__________________
29375, 35
|
|
04.04.2023, 07:12
|
|
Аспирант
|
|
Регистрация: 07.05.2019
Сообщений: 38
|
|
Сообщение от Aetae
|
Способ называется цикл, лол.)
for(const inf of obj){
let d = document.createElement("div");
for(const key in inf){
d.setAttribute("data-" + key, inf[key]);
}
console.log(d);
}
или
let divs = obj.map(inf => {
let d = document.createElement("div");
Object.entries(inf).forEach(
([key, value]) => d.setAttribute(`data-${key}`, value)
);
console.log(d);
return d;
});
|
Второй метод мне понравился ... спасибо .. работает
Для себя увидел новое ..
Огромное спасибо |
|
04.04.2023, 07:41
|
 |
Профессор
|
|
Регистрация: 03.02.2020
Сообщений: 2,704
|
|
|
Вместо
d.setAttribute(`data-${key}`, value)
можно
d.dataset[key] = value;
|
|
04.04.2023, 09:29
|
 |
Профессор
|
|
Регистрация: 27.05.2010
Сообщений: 33,070
|
|
maxim1978,
for(const inf of obj){
let d = document.createElement("div");
Object.assign(d.dataset, inf);
}
|
|
04.04.2023, 09:34
|
|
Профессор
|
|
Регистрация: 27.05.2010
Сообщений: 33,070
|
|
maxim1978,
<!DOCTYPE HTML>
<html>
<head>
<title>Untitled</title>
<meta charset="utf-8">
<style type="text/css">
div:after {
content: attr(data-price);
}
</style>
</head>
<body>
<script>
let obj = [{
name: "",
average: "",
cpu: "",
price: "1",
}, {
name: "",
average: "",
cpu: "",
price: "2",
}, {
name: "",
average: "",
cpu: "",
price: "3",
}, {
name: "",
average: "",
cpu: "",
price: "4",
}]
for (const inf of obj) {
let d = document.createElement("div");
Object.assign(d.dataset, inf);
document.body.append(d);
}
</script>
</body>
</html>
|
|
|
|
