时间戳

首页 > 解决方案 > 如何从对象中获取名称并将其分配给新创建的元素？

javascript - 如何从对象中获取名称并将其分配给新创建的元素？

问题描述

我的问题是：

  1. 如何使用对象中的每个名称值创建一个新 p？
  2. img，评论等也是如此。

我很挣扎，因为我得到了所有的名字，但我不知道如何为每个索引分别创建新段落（appendData 函数）和另一个函数它只是坏的和重复的代码（generateImg 函数）

const data = {
  "arr": [{
    "name": "Box",
    "reviews": 65,
    "img": 1
  }, {
    "name": "Drawer",
    "reviews": 70,
    "img": 2
  }, {
    "name": "Desk",
    "reviews": 20,
    "img": 3
  }, {
    "name": "Chair",
    "reviews": 76,
    "img": 4
  }, {
    "name": "Sofa",
    "reviews": 90,
    "img": 5
  }]
}

function appendData(data) {
  for (var i = 0; i < data.arr.length; i++) {
    var p = document.createElement("p");
    var obj = data.arr[i];
    p.textContent = obj.name;
    var elem = document.getElementById('new');
    elem.appendChild(p);
  }
}


function generateImg(data) {
  for (i = 0; i < data.arr.length; i++) {
    let productImage1 = document.getElementById('productImage1').src = "./img/" + data.arr[0].img + ".jpg";
    let productImage2 = document.getElementById('productImage2').src = "./img/" + data.arr[1].img + ".jpg";
    let productImage3 = document.getElementById('productImage3').src = "./img/" + data.arr[2].img + ".jpg";
    let productImage4 = document.getElementById('productImage4').src = "./img/" + data.arr[3].img + ".jpg";
    let productImage5 = document.getElementById('productImage5').src = "./img/" + data.arr[4].img + ".jpg";
  }
}
<div class="row">
  <div class="media">
    <img id="productImage1" src="" alt="Box">
  </div>
</div>

<div class="row">
  <div class="product-title"></div>
</div>

<div class="row">
  <div class="reviews"></div>
</div>





<div class="row">
  <div class="media">
    <img id="productImage2" src="" alt="Drawer">
  </div>
</div>

<div class="row">
  <div class="product-title"></div>
</div>

<div class="row">
  <div class="reviews"></div>
</div>

标签： javascripthtmljson

解决方案

你的意思是这样吗？当你为每件事都有一个 div 时，不需要 P

const data = {
  "arr": [
    { "name": "Box",    "reviews": 65, "img": 1 }, 
    { "name": "Drawer", "reviews": 70, "img": 2 }, 
    { "name": "Desk",   "reviews": 20, "img": 3 }, 
    { "name": "Chair",  "reviews": 76, "img": 4 }, 
    { "name": "Sofa",   "reviews": 90, "img": 5 }
  ]
}

const html = data.arr.map(item => `<div class="row">
  <div class="media"><img src=".img/${item.img}.jpg" /></div>
</div>
<div class="row">
  <div class="product-title">${item.name}</div>
</div>
<div class="row">
  <div class="reviews">${item.reviews}</div>
</div>`)

document.getElementById("container").innerHTML = html.join("")
<div id="container"></div>

推荐阅读