从嵌套的 json 对象中检索值答案

【问题标题】：Retrieve value from nested json object从嵌套的 json 对象中检索值
【发布时间】：2017-08-01 03:29:19
【问题描述】：

我有以下 json 对象：

{
  "name": "Cairo",
  "title": "Lots to do in cairo",
  "categories": ["travel", "holiday"],
  "image": [
    {
      "thumbnail": {
        "src": "/images/thumbnail/cairo.jpg",
        "height": 27,
        "width": 60
      }
    },
    {
      "mobile": {
        "src": "/images/mobile/cairo.jpg",
        "height": 106,
        "width": 236
      }
    },
    {
      "original": {
        "src": "/images/original/cairo.jpg",
        "height": 866,
        "width": 1920
      }
    }
  ]
}

我正在尝试使用 jquery/lodash/javascript 访问此特定对象的“原始”图像的“src”值。

我可以使用以下输出值：

var originalSrc = _.result(obj, 'image[2].original.src');

这个问题是我必须硬编码 [2]，但是这个 json 响应中图像变体的顺序不是固定的，所以下次它可以返回 'mobile' src。

有人对此有任何解决方案/想法吗？

谢谢

阿什尔

【问题讨论】：

你能改变输入的json数组吗？
如果图像是一个对象，你可以像使用image.original的属性一样访问它，否则你需要创建一个特殊的函数来循环遍历数组并找到一个属性为“original”的对象跨度>

标签： javascript json filter lodash

【解决方案1】：

您可以使用find 从image 数组中获取带有original 键的项目，使用get 获取src。请注意，我们需要使用chain 将数组转换data.image 中的方法通过find 链接到对象中。

var result = _.chain(data.image)
  .find('original')
  .get('original.src')
  .value();

var data = {
  "name": "Cairo",
  "title": "Lots to do in cairo",
  "categories": ["travel", "holiday"],
  "image": [
    {
      "thumbnail": {
        "src": "/images/thumbnail/cairo.jpg",
        "height": 27,
        "width": 60
      }
    },
    {
      "mobile": {
        "src": "/images/mobile/cairo.jpg",
        "height": 106,
        "width": 236
      }
    },
    {
      "original": {
        "src": "/images/original/cairo.jpg",
        "height": 866,
        "width": 1920
      }
    }
  ]
};

var result = _.chain(data.image)
  .find('original')
  .get('original.src')
  .value();
  
console.log(result);

&lt;script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.4/lodash.js"&gt;&lt;/script&gt;

另一种解决方案是使用map获取图像源，然后使用first获取值。

var result = _(data.image).map('original.src').first();

var data = {
  "name": "Cairo",
  "title": "Lots to do in cairo",
  "categories": ["travel", "holiday"],
  "image": [
    {
      "thumbnail": {
        "src": "/images/thumbnail/cairo.jpg",
        "height": 27,
        "width": 60
      }
    },
    {
      "mobile": {
        "src": "/images/mobile/cairo.jpg",
        "height": 106,
        "width": 236
      }
    },
    {
      "original": {
        "src": "/images/original/cairo.jpg",
        "height": 866,
        "width": 1920
      }
    }
  ]
};

var result = _(data.image).map('original.src').first();
  
console.log(result);

&lt;script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.4/lodash.js"&gt;&lt;/script&gt;

【讨论】：

【解决方案2】：

您可以尝试通过多个步骤来实现解决方案。

获取对象属性，在您的情况下，thumbnail, mobile, original 是图像对象内数组内对象的属性。
Object.keys(objJSON.image) 检索数组内的所有属性，在这种情况下，因为它是一个数组结果将是[0,1,2]
在 Image 对象中找到“原始”Image 对象。可以使用object["PropertyName"] 语法访问对象中的属性，find 方法返回匹配条件的第一个元素。因此，基本上，我们尝试找到包含名称为“original”的属性的对象。

Object.keys(objJSON.image).find(i => objJSON.image[i]["original"]);

从对象中检索src 属性。 objJSON.image[originalImageIndexInArray].original.src;

var objJSON = {
  "name": "Cairo",
  "title": "Lots to do in cairo",
  "categories": ["travel", "holiday"],
  "image": [
    {
      "thumbnail": {
        "src": "/images/thumbnail/cairo.jpg",
        "height": 27,
        "width": 60
      }
    },
    {
      "mobile": {
        "src": "/images/mobile/cairo.jpg",
        "height": 106,
        "width": 236
      }
    },
    {
      "original": {
        "src": "/images/original/cairo.jpg",
        "height": 866,
        "width": 1920
      }
    }
  ]
};

var originalImageIndexInArray = Object.keys(objJSON.image).find(i => objJSON.image[i]["original"]);

var originalImageSrc = objJSON.image[originalImageIndexInArray].original.src;

console.log(originalImageSrc);

【讨论】：

【解决方案3】：

可以试试这个：

var json = {
  "name": "Cairo",
  "title": "Lots to do in cairo",
  "categories": ["travel", "holiday"],
  "image": [
    {
      "thumbnail": {
        "src": "/images/thumbnail/cairo.jpg",
        "height": 27,
        "width": 60
      }
    },
    {
      "mobile": {
        "src": "/images/mobile/cairo.jpg",
        "height": 106,
        "width": 236
      }
    },
    {
      "original": {
        "src": "/images/original/cairo.jpg",
        "height": 866,
        "width": 1920
      }
    }
  ]
}

var desiredObject = json.image.filter(function(image){return Object.keys(image)[0] == 'original'; })[0]

console.log(desiredObject);
console.log(desiredObject.original.src);

【讨论】：

【解决方案4】：

JSON 的布局很糟糕（正如上面的 cmets 指出的那样），但如果你不能改变它，这个单行应该可以工作：

obj.image.filter(function (x) { return Object.keys(x)[0] == 'original' })[0].original.src

【讨论】：