如何使用 javascript 根据 html 中的条件循环具有不同键值对的 JSON 数组以显示特定值

Question

Suppose my JSON array is as shown:

[{
    "type": "Sweatshirt",
    "brand": "H&M",
    "Color": "Yellow",
    "Neck": "Turtle neck",
    "Arm": "Full Arm"
  },
  {
    "type": "Sweatshirt",
    "brand": "PUMA",
    "Color": "Black",
    "Neck": "Round neck",
    "Arm": "Full Arm"
  },
  {
    "type": "Dresses",
    "Length": "knee length",
    "Occasion": "Party",
    "Neck": "Halter neck"
  },
  {
    "type": "Dresses",
    "Length": "Floor length",
    "Occasion": "Casual",
    "Neck": "Boat neck"
  }
]

how can I loop over array and check if the type is dress or SweatShirt and display respective values in HTML div

Answer 1

Here is an example that will show you how you can loop and assign values to html elements

This example is for demonstration only

 array=[{ "type": "Sweatshirt", "brand": "H&M", "Color": "Yellow", "Neck": "Turtle neck", "Arm": "Full Arm" }, { "type": "Sweatshirt", "brand": "PUMA", "Color": "Black", "Neck": "Round neck", "Arm": "Full Arm" }, { "type": "Dresses", "Length": "knee length", "Occasion": "Party", "Neck": "Halter neck" }, { "type": "Dresses", "Length": "Floor length", "Occasion": "Casual", "Neck": "Boat neck" }] disp=document.getElementById("disp") array.forEach(o=>{ if(o.type=="Sweatshirt"){ type=document.createElement("li") brand=document.createElement("li") type.textContent=o.type brand.textContent=o.brand disp.appendChild(type) disp.appendChild(brand) }})

 <div id="disp7"><ul id="disp"></ul></div>