JSON获取children属性的值

时间:2017-09-20 23:28:47

标签: javascript jquery json lodash

我正在进行API调用并返回一些数据。我遇到的问题是访问JSON“logos_here []”的第二级。目标是仅返回来自所有对象的url数据。我已经附加了数据以及我现在正在使用的内容甚至让我接近。

数据在这里

{
    "data": {
        "object": {
            "metadata": {
                "logos_here": [
                    {
                        "logo1": {
                            "url": "https://cosmicjs.com/upload/logo1.jpg",
                            "imgix_url": "https://cosmicjs.imgix.net/logo1.jpg"
                        }
                    },
                    {
                        "logo2": {
                            "url": "https://cosmicjs.com/upload/logo2.jpg",
                            "imgix_url": "https://cosmicjs.imgix.net/logo2.jpg"
                        }
                    },
                    {
                        "logo3": {
                            "url": "https://cosmicjs.com/upload/logo3.jpg",
                            "imgix_url": "https://cosmicjs.imgix.net/logo3.jpg"
                        }
                    },
                    {
                        "logo4": {
                            "url": "https://cosmicjs.com/upload/logo4.jpg",
                            "imgix_url": "https://cosmicjs.imgix.net/logo4.jpg"
                        }
                    },
                    {
                        "logo5": {
                            "url": "https://cosmicjs.com/upload/logo5.jpg",
                            "imgix_url": "https://cosmicjs.imgix.net/logo5.jpg"
                        }
                    }
                ]
            }
        }
    }
}

代码在这里

var response_json = JSON.parse(response.responseText);
var page = response_json.data.object;
var main_image = page.metadata.logos_here;

function listData(main_image) {
  var html = "<ul>";
  $.each(main_image, function(key, val) {
    html += "</br>";
    if (typeof val === "object")
      html += listData(val);
    else
      html += val;
    html += "</br>";
  });
  html += "</ul>";
  return html;
};

$(listData(main_image)).appendTo("body");

我想提取“url”值并将其显示在li中。任何帮助表示赞赏。

1 个答案:

答案 0 :(得分:2)

此代码假定logos_here数组中的每个对象只包含一个属性。它使用Object.keys()获取该属性名称,然后使用它来获取对象及其url属性。

function listData(main_image) {
  var html = "<ul>";
  $.each(main_image, function(index, val) {
    var key = Object.keys(val)[0];
    var url = val[key].url;
    html += "<li>" + url + "</li>";
  });
  html += "</ul>";
  return html;
};

如果每个对象中可以有多个属性,则可以使用嵌套循环。

function listData(main_image) {
  var html = "<ul>";
  $.each(main_image, function(index, val) {
    $.each(val, function(key, obj) {
      html += "<li>" + obj.url + "</li>";
    });
  });
  html += "</ul>";
  return html;
};