[英]How do I get the name from object and assign it to a new created element?
My question is:我的问题是:
I am struggling because I get all the names but I don't know how to create new paragraphs for every index separately (appendData function) and the other function it is just bad and duplicate code (generateImg function)我很挣扎,因为我得到了所有的名字,但我不知道如何为每个索引分别创建新段落(appendData 函数)和另一个 function 它只是错误和重复的代码(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>
You mean like this?你是说像这样? No need for a P when you have a div for each thing当你对每件事都有一个 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>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.