JSON获取子属性的值

Question

我正在调用 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 中。任何帮助表示赞赏。

Answer 1

此代码假定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;
};