append dictionary in html using jQuery

Question

i have a dictionary with key and list value and i want to create a card using jQuery append function.

dict = {
  "Meizu X8": [
    ["4GB 64GB Global", "8 months ago", "8.6", "\u20b9 12,509"],
    ["4GB 128GB Global", "8 months ago", "8.6", "\u20b9 13,992"]
  ],
  "Xiaomi Mi8 Lite": [
    ["Global 128GB", "8 months ago", "8.6", "\u20b9 16,315"]
  ],
  "UMIDIGI F1": [
    ["4GB 128GB", "5 months ago", "8.6", "\u20b9 10,884"]
  ]
}

i want to create a card for every key and if key value having 2 or more list value then function will also create a card with the same key name

for eg-

   <div class='card'>
    <div class='card-header'>Meizu X8</div>
     <div class='card-body'>
      <h5>4GB 64GB Global</h5>
       <h5>8 months</h5>
        <h5>8.6</h5>
         <h5>12,509</h5>
     </div>
   </div>

 <div class='card'>
    <div class='card-header'>Meizu X8</div>
     <div class='card-body'>
      <h5>4GB 128GB Global</h5>
       <h5>8 months</h5>
        <h5>8.6</h5>
         <h5>13,992</h5>
     </div>
   </div>

  <div class='card'>
    <div class='card-header'>Xiaomi Mi8 Lite</div>
     <div class='card-body'>
      <h5>"Global 128GB</h5>
       <h5>8 months</h5>
        <h5>8.6</h5>
         <h5>16,315</h5>
     </div>
   </div>

  <div class='card'>
    <div class='card-header'>UMIDIGI F1</div>
     <div class='card-body'>
      <h5>4GB 128GB</h5>
       <h5>5 months</h5>
        <h5>8.6</h5>
         <h5>10,884</h5>
     </div>
   </div>

Answer 1

You can do this by nesting a for loop inside another for loop, like I've done in the following snippet

 var dict = { "Meizu X8": [ ["4GB 64GB Global", "8 months ago", "8.6", "\₹ 12,509"], ["4GB 128GB Global", "8 months ago", "8.6", "\₹ 13,992"] ], "Xiaomi Mi8 Lite": [ ["Global 128GB", "8 months ago", "8.6", "\₹ 16,315"] ], "UMIDIGI F1": [ ["4GB 128GB", "5 months ago", "8.6", "\₹ 10,884"] ] } for (var name in dict) { for (var entry of dict[name]) { var card = `<div class='card'> <div class='card-header'>${name}</div> <div class='card-body'> <h5>${entry[0]}</h5> <h5>${entry[1]}</h5> <h5>${entry[2]}</h5> <h5>${entry[3]}</h5> </div> </div>` $("#container").append(card) } } 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet"> <div id="container"> </div> 

Answer 2

Here is one more solution. It will work even if sometime you will want to expand an array of phone features:

 var dict = { "Meizu X8": [ ["4GB 64GB Global", "8 months ago", "8.6", "\₹ 12,509"], ["4GB 128GB Global", "8 months ago", "8.6", "\₹ 13,992"] ], "Xiaomi Mi8 Lite": [ ["Global 128GB", "8 months ago", "8.6", "\₹ 16,315"] ], "UMIDIGI F1": [ ["4GB 128GB", "5 months ago", "8.6", "\₹ 10,884"] ] } Object.keys(dict).forEach((model) => { dict[model].forEach((entry) => { var card = `<div class='card'> <div class='card-header'>${model}</div> <div class='card-body'>`+ entry.map((feature) => `<h5>${feature}</h5>`).join("") + `</div></div>`; $("#container").append(card); }); }); 

 <link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet"> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div id="container"></div>