Javascript-在回圈內回圈物件-有解無憂

不確定我是否準確地表達了這一點，但我有一個物件，我想創建一個變數，然后附加到頁面中的 div。我在 javascript / Jquery 中執行此操作。

物體：

   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"
      }

然后我回圈它來獲取資料，但想創建一個 html 的 var 然后追加，但需要回圈解釋。

   $.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);

    });

我無法弄清楚如何回圈每個物件項內的多個解釋來創建這個 div、追加、重復。

如果有更好的方法告訴我！我一直在考慮 PHP，我可以將它從其中拆分以創建 HTML 回圈 HTML 回圈等，但在這里沒有經驗。

uj5u.com熱心網友回復：

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

uj5u.com熱心網友回復：

在本機 Javascript 中，您可以這樣做：

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>

uj5u.com熱心網友回復：

您可以使用生成每個專案的 divarray#map并將它們連接在一起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>

或者，您可以使用array#map模板文字來生成您的 html 字串。

顯示代碼片段

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>

轉載請註明出處，本文鏈接：https://www.uj5u.com/qita/441169.html

標籤：javascript jQuery 循环

上一篇：如何使用導航組件從第二個片段回傳到第一個片段？

下一篇：使用Jquery回圈顯示JSONP陣列