Retrieve value from nested json object

Question

I have the following json object:

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

I'm trying to access the 'src' value of the 'original' image for this particular object using jquery/lodash/javascript.

I can output the value using the folllowing:

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

The problem with this is that I have to hardcode the [2], but the ordering of the image variants in this json response aren't fixed, so the next time it could return the 'mobile' src instead.

Does anyone have any solutions/ideas around this?

Thanks

Ashil

Answer 1

JSON的布局不正确（如上面的注释所指出的那样），但是如果您不能更改它，则此单行代码应该可以工作：

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

Answer 2

Can try this:

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

Answer 3

You can try to achieve the solution in multiple Steps.

1. Get the Object Properties, in your case, thumbnail, mobile, original are the properties of the objects inside the array inside the image object.
   Object.keys(objJSON.image) retrieves all the properties inside the array, in this case since it an array the result would be [0,1,2]

2. Find the "original" Image object inside the Image object. The Properties in an object can be accessed using object["PropertyName"] syntax and find method returns the first element matching the criteria. So, basically, we try to find the object which contains the property with name "original".

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

3. Retrieve the src property from the object. 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); 

Answer 4

You can use find to obtain an item with an original key from the image array, use get to get the src . Note that we need to use chain to chain methods from an array conversion, data.image , into an object through 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); 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.4/lodash.js"></script> 

An alternative solution is to use map to get the image source, and then use first to get the value.

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

 <script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.4/lodash.js"></script>