用javascript遍历对象

Question

我有一个带有虚拟信息的json对象。 我想要通过显示标题和描述来显示我的数据。 当我循环浏览信息时，它会显示3个标题，然后显示3个描述。 我只想标题说明，标题说明，标题说明。 我究竟做错了什么？ 以下是我的json数据和我的循环

样本数据

{
  "sample": {
    "insurance": {

      "keyWord": "insurance",
      "definition": "some brief shit talk on what it is that we can do",

      "data": [{
        "link": "http://placehold.it/350x350",
        "title": "this is a title",
        "img": "http://placehold.it/350x350",
        "desc": "Cras ultricies ligula sed magna dictum porta. Proin eget tortor risus. Vivamus suscipit tortor eget felis porttitor volutpat. "
      }, {
        "link": "http://placehold.it/350x350",
        "title": "this is a title3",
        "img": "http://placehold.it/350x350",
        "desc": "Cras ultricies ligula sed magna dictum porta. Proin eget tortor risus. Vivamus suscipit tortor eget felis porttitor volutpat. "
      }, {
        "link": "http://placehold.it/350x350",
        "title": "this is a titl4",
        "img": "http://placehold.it/350x350",
        "desc": "Cras ultricies ligula sed magna dictum porta. Proin eget tortor risus. Vivamus suscipit tortor eget felis porttitor volutpat. "
      }, {
        "link": "http://placehold.it/350x350",
        "title": "this is a title5",
        "img": "http://placehold.it/350x350",
        "desc": "Cras ultricies ligula sed magna dictum porta. Proin eget tortor risus. Vivamus suscipit tortor eget felis porttitor volutpat. "
      }]
    },
    "cover": {
      "keyWord": "cover",
      "definition": "some brief shit talk on what it is that we can do",

      "data": [{
        "link": "http://placehold.it/350x350",
        "title": "this is a title",
        "img": "http://placehold.it/350x350",
        "desc": "Cras ultricies ligula sed magna dictum porta. Proin eget tortor risus. Vivamus suscipit tortor eget felis porttitor volutpat. "
      }, {
        "link": "http://placehold.it/350x350",
        "title": "this is a title2",
        "img": "http://placehold.it/350x350",
        "desc": "Cras ultricies ligula sed magna dictum porta. Proin eget tortor risus. Vivamus suscipit tortor eget felis porttitor volutpat. "
      }]
    },
    "damage": {
      "keyWord": "damage",
      "definition": "some brief shit talk on what it is that we can do",

      "data": [{
        "link": "http://placehold.it/350x350",
        "title": "this is a title",
        "img": "http://placehold.it/350x350",
        "desc": "Cras ultricies ligula sed magna dictum porta. Proin eget tortor risus. Vivamus suscipit tortor eget felis porttitor volutpat. "
      }, {
        "link": "http://placehold.it/350x350",
        "title": "this is a title2",
        "img": "http://placehold.it/350x350",
        "desc": "Cras ultricies ligula sed magna dictum porta. Proin eget tortor risus. Vivamus suscipit tortor eget felis porttitor volutpat. "
      }]
    },
    "water": {
      "keyWord": "water",
      "definition": "some brief shit talk on what it is that we can do",

      "data": [{
        "link": "http://placehold.it/350x350",
        "title": "this is a title",
        "img": "http://placehold.it/350x350",
        "desc": "Cras ultricies ligula sed magna dictum porta. Proin eget tortor risus. Vivamus suscipit tortor eget felis porttitor volutpat. "
      }, {
        "link": "http://placehold.it/350x350",
        "title": "this is a title2",
        "img": "http://placehold.it/350x350",
        "desc": "Cras ultricies ligula sed magna dictum porta. Proin eget tortor risus. Vivamus suscipit tortor eget felis porttitor volutpat. "
      }]
    },
    "theft": {
      "keyWord": "water",
      "definition": "some brief shit talk on what it is that we can do",

      "data": [{
        "link": "http://placehold.it/350x350",
        "title": "this is a title",
        "img": "http://placehold.it/350x350",
        "desc": "Cras ultricies ligula sed magna dictum porta. Proin eget tortor risus. Vivamus suscipit tortor eget felis porttitor volutpat. "
      }, {
        "link": "http://placehold.it/350x350",
        "title": "this is a title2",
        "img": "http://placehold.it/350x350",
        "desc": "Cras ultricies ligula sed magna dictum porta. Proin eget tortor risus. Vivamus suscipit tortor eget felis porttitor volutpat. "
      }]
    }
  }
}

JS代码

var applyAssets = function(asset, a) {
  var assetsLi = document.getElementById('assetsLi')
  var assetsDesc = document.getElementById('assetsDesc')
  var assets__list = document.getElementById('assets__list')

  for (key in asset) {

    if (key === a) {
      var assetKey = asset[key];
      assetsDesc.innerHTML = assetsDesc.innerHTML + '<div class="assets__description--inner"> <span class="phrase">' + assetKey.keyWord + '</span> <span class="definition">Definition:</span> <i>' + assetKey.definition + '</i> <div class="close"> <button type="button" id="closeAsset" name="button">X</button> </div> </div>'

      for (n in assetKey.data) {
        assets__list.innerHTML = assets__list.innerHTML + ' <li><a href="' + assetKey.data[n].link + '"> <div class="grid__full-width"> <img src="' + assetKey.data[n].img + '" alt="' + assetKey.data[n].title + '" /> </div> <h3>' + assetKey.data[n].title + '</h3> <p>' + assetKey.data[n].desc + '</p> </a></li></div>'
      }
    }
  }
}

Answer 1

您可以使用jQuery.each：

$.each(asset, function(i, elem) {
    $.each(elem.data, function(j, item) {
       var title = item.title; 
       var desc = item.desc;
        //build html
    }
}