Javascript - Looping an object inside an loop-CodePudding

Not sure if I am phrasing this exactly but I have an object that I want to create a variable from to then append to a div in a page. I am doing this in javascript / Jquery.

The object:

   var object = [
      {
        "explanation": [
          "Test 1",
          "Test 2",
          "Test 3",
        ],
        "issue": "Walking, Biking, and Transit"
      },
      {
        "explanation": [
          "Test 1",
          "Test 2",
        ],
        "issue": "Affordable Housing"
      },
      {
        "explanation": [
          "Test 3"
        ],
        "issue": "Placemaking"
      }

Then I loop it to get the data but want to create a var of html to then append but need to loop the explanation.

   $.each(object, function (key, val) {

      var title = val.issue;
      var items = val.explanation;

      console.log(title, items);

      var item =
        '<div > '  
        '  <div>'   title   '</div> '  
        //LOOP items here to create a list of sub items for the parent.
        '  <div>'   items   '</div> '  
        '</div> ';

      $("#gridArea").append(item);

    });

I cannot figure out how to loop the multiple explanations inside each object item to create this div, append, repeat.

If there is a better way let me know! I keep thinking to PHP where I can split it up from to create HTML loop HTML loop, etc. but don't have experience with that here.

CodePudding user response：

for(let obj of object){
    let issue = obj.issue;
    for(let exp of obj.explanation){
        console.log(exp)
    }
}

CodePudding user response：

in Native Javascript, you can do this:

var data = [
  {
    explanation: ["Test 1", "Test 2", "Test 3"],
    issue: "Walking, Biking, and Transit",
  },
  {
    explanation: ["Test 1", "Test 2"],
    issue: "Affordable Housing",
  },
  {
    explanation: ["Test 3"],
    issue: "Placemaking",
  },
];

let gridArea = document.getElementById("gridArea");
data.forEach((obj) => {
  let title = obj.issue;
  let items = obj.explanation;
  let list = document.createElement("div");
  list.classList.add("item");
  list.innerHTML = `<h3>${title}</h3>`;
  items.forEach((item) => {
    let p = document.createElement("p");
    p.innerHTML = item;
    list.appendChild(p);
  });
  gridArea.appendChild(list);
});

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <div id="gridArea"></div>
    <script src="./index.js"></script>
  </body>
</html>

CodePudding user response：

You can generate your div of each item using array#map and join them together using array#join().

var arr = [ { "explanation": [ "Test 1", "Test 2", "Test 3", ], "issue": "Walking, Biking, and Transit" }, { "explanation": [ "Test 1", "Test 2", ], "issue": "Affordable Housing" }, { "explanation": [ "Test 3" ], "issue": "Placemaking" }];
$.each(arr, function(key, val) {
  var title = val.issue;
  var items = val.explanation;
  
  var item =
    '<div > '  
    '  <div>'   title   '</div> '
       items.map(item => '<div>'   item   '</div>').join('')  
    '</div> ';
  $("#gridArea").append(item);
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="gridArea"></div>

Alternatively, you can use array#map with template literal to generate your html string.

const arr = [ { "explanation": [ "Test 1", "Test 2", "Test 3", ], "issue": "Walking, Biking, and Transit" }, { "explanation": [ "Test 1", "Test 2", ], "issue": "Affordable Housing" }, { "explanation": [ "Test 3" ], "issue": "Placemaking" }];

const htmlString = arr.map(o =>
  `<div >
  <div>${o.issue}</div>
  ${o.explanation.map(item => `<div>${item}</div>`).join('')}
  </div>`)
  .join('');

$("#gridArea").append(htmlString);

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="gridArea"></div>