Javascript-форум - Есть ли способ сократить запись?

Javascript-форум (https://javascript.ru/forum/)

- Events/DOM/Window (https://javascript.ru/forum/events/)

- - Есть ли способ сократить запись? (https://javascript.ru/forum/events/85089-est-li-sposob-sokratit-zapis.html)

Есть ли способ сократить запись?

Есть к примеру фейковый массив который к примеру получен с базы данных :

Код:

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) как это написать сокращённо ... ?

Способ называется цикл, лол.)

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;
});

Цитата:

Сообщение от Aetae (Сообщение 551371)

Способ называется цикл, лол.)

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;
});

Второй метод мне понравился ... спасибо .. работает
Для себя увидел новое ..
Огромное спасибо

Вместо
d.setAttribute(`data-${key}`, value)
можно
d.dataset[key] = value;

maxim1978,

for(const inf of obj){
    let d = document.createElement("div");
    Object.assign(d.dataset, inf);
    }

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>