how to loop over JSON array having different key value pairs to display specific values depending on condition in html using javascript

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

Does this answer your question? [How do I check if an array includes a value in JavaScript?](https://stackoverflow.com/questions/237104/how-do-i-check-if-an-array-includes-a-value-in-javascript) — Bucket, Jul 23 '20 at 16:05
@Bucket I want to display the values based on type in div of html as i a newbie i have no idea on how to do that — Jeon, Jul 23 '20 at 16:07

Sven.hig · Accepted Answer · 2020-07-23T16:41:41.330

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>

Hey thanks for the help, but why its not printing Sweatshirt, H&M — Jeon, Jul 23 '20 at 16:31
hey thank you so much for the suggestion kind of got a idea on this :) — Jeon, Jul 23 '20 at 17:07

how to loop over JSON array having different key value pairs to display specific values depending on condition in html using javascript

1 Answers1