javascript - 使用javascript和html构建产品动态列表(Build dynamic list of products using javascript and html)

Question

Instead of manually entering information for every product, like in below html page, I would like to dynamically build divs (3 per row) for each one of my sets of data: pastryData , coffeeData .(我不想为每个产品手动输入信息，就像下面的html页面一样，我想为我的每组数据动态创建divs （每行3个）： pastryData ， coffeeData 。)

And then have a link on each image that when user clicks it will redirect him to product page with that specific item description.(然后在每个图像上都有一个链接，当用户单击该链接时，它将把他重定向到带有该特定项目描述的产品页面。)

I have following products.html page:(我有以下product.html页面：)

<div class="container">
    <div id="pastries">
        <h3>Pastries</h3>
        <div class="card">
            <img src="images/croissant.png" alt="croisant" style="width:100%">
            <p class="calories">200 calories</p>
            <p class="name">Croissant</p>
        </div>                  
    </div>

    <div id="coffee">                   
       <h3>Coffee</h3>
    </div>
</div>
...
<script src="js/products.js" type="text/javascript"></script>   
</body>

Here is my products.js file:(这是我的products.js文件：)

    var pastryData = [
       { 
        itemID: "1", 
        itemName: "Croissant", 
        itemDesc: "Light, airy and shatteringly crisp, with a deeply caramelized buttery flavor, these croissants are a labor of love that's absolutely worth the time.", 
        calories: "200", 
        price: 1.99, 
        image: "../images/croissant.png"
        },
       { 
        itemID: "2", 
        itemName: "Cinnamon-Date Buns", 
        itemDesc: "These delicious cinnamon buns are infused with puréed dates", 
        calories: "300", 
        price: 2.14, 
        image: "../images/cinnamon-date-buns.jpg"
        },
       { 
        itemID: "3", 
        itemName: "Savory Fondue Babka", 
        itemDesc: "This cheesy loaf goodness has an amazing flavor of foundue.", 
        calories: "320", 
        price: 2.32, 
        image: "../images/fondue-babka.jpg"
        },
       { 
        itemID: "4", 
        itemName: "Quinoa-Banana Muffins", 
        itemDesc: "Quinoa had never tasted better than in this flavorful muffin.", 
        calories: "330", 
        price: 1.78, 
        image: "../images/Quinoa-Banana-Muffins.jpg"
        },
    ];

    var coffeeData = [
       { 
        itemID: "9", 
        itemName: "Cappuccino", 
        itemDesc: "Cappuccino", 
        calories: "150", 
        price: 2.89, 
        image: "../images/Cappuccino.jpg"}
        },
       { 
        itemID: "10", 
        itemName: "Latte", 
        itemDesc: "Latte", 
        calories: "100", 
        price: 2.33, 
        image: "../images/latte.jpg"}
        },
       { 
        itemID: "11", 
        itemName: "Caffe Americano", 
        itemDesc: "Caffe Americano", 
        calories: "250", 
        price: 1.50, 
        image: "../images/caffe-americano.jpg"}
        },
       { 
        itemID: "12", 
        itemName: "Regular Coffee", 
        itemDesc: "Regular Coffee", 
        calories: "0", 
        price: 0.99, 
        image: "../images/coffee.jpg"}
        },
    ];

    function buildData(data, idName) {
  for (var prop of data) {
        var imageElem = document.createElement("img");
        imageElem.setAttribute("src", prop.image);
        imageElem.setAttribute("width", "100%");        
        imageElem.setAttribute("alt", prop.itemName);

        var paramCalories = document.createElement("p");
        paramCalories.className = "calories"
        paramCalories.innerText = prop.calories + " calories";

        var paramName = document.createElement("p");
        paramName.className = "name"
        paramName.innerText = prop.itemName;

        var cell = document.createElement("div");
        cell.className = "card";
        cell.appendChild(imageElem);
        cell.appendChild(paramCalories);
        cell.appendChild(paramName);

        document.getElementById(idName).appendChild(cell);
  }
}

This is all I have so far, but I am not sure how to actually make this work.(到目前为止，这只是我的全部，但是我不确定如何真正完成这项工作。)

products.css(products.css)

.card {
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
  max-width: 300px;
  margin: auto;
  text-align: center;
  font-family: arial;
}

.calories {
  color: grey;
  font-size: 18px;
}

.card button {
  border: none;
  outline: 0;
  padding: 12px;
  color: white;
  background-color: #000;
  text-align: center;
  cursor: pointer;  
  font-size: 18px;
}

.card button:hover {
  opacity: 0.7;
}

.card .left {
    float: left;
}

.card .name {
  color: brown;
  font-size: 24px;
}

  ask by Angelina translate from so

Answer 1

I'm not going to make the homework for you, but you need to look into string interpolation.(我不会为您做作业，但是您需要研究字符串插值。)

ES6 has made this easy using template string literals, but I guess you will have to use ES5 for school (as your example code doesn't use ES6).(ES6使用模板字符串文字使此操作变得容易，但是我想您将必须在学校中使用ES5（因为您的示例代码不使用ES6）。)
You can get some inspiration here: How can I do string interpolation in JavaScript?(您可以在此处获得一些启发： 如何在JavaScript中进行字符串插值？)

In theory you will:(理论上，您将：)

• Create a function that takes interpolated values (your json values), and return a fully generated html string for a single json object.(创建一个接受插值（您的json值）的函数，并为单个json对象返回完全生成的html字符串。) You can use simple string concatenation if you want to;(如果需要，可以使用简单的字符串连接。)
• Loop through the array of javascript values and call the function for each item.(循环遍历javascript值数组，并为每个项目调用函数。) Concatenate the returned html for each item into a list;(将返回的每个项目的html连接到一个列表中；)
• Perform a single write back to the DOM (like you did in your example, for example using innerHTML ).(执行单个写回DOM（就像你在你的例子一样，例如使用innerHTML ）。)