jQuery/Lodash - Get multiple nested json values by key

Question

I've got a set of json that's being generated for use with other functions.

window.customJSON = {
  "1894873974": {
    title: "Yellow",
    images: [
      {
      main: "/images/img1.jpg",
      alt: "image alt tag"
      },
      {
      main: "/images/img2.jpg",
      alt: "image alt tag"
      }
    ]
  },
  "2397423987": {
    title: "Orange",
    images: [
      {
      main: "/images/img1.jpg",
      alt: "image alt tag"
      }
    ]
  }
}

What I'm trying to do is get all values of 'main' within 'images' for all items and assign them into a single array. The numbers represent unique codes so I'm not trying to get a specific index but all image urls.

I'm using lodash to successfully map other things so I've tried using:

var imgArray = _.map(window.customJSON.images, 'main');

I'm just not quite sure the correct syntax. I've looked through the lodash docs and I haven't been able to google the right combination of words to get an answer.

A jquery or lodash solution would both work.

Thanks

There is no JSON in your question, please read What is the difference between JSON and Object Literal Notation? — str
– str, Commented Jul 24, 2018 at 9:13

31piy · Accepted Answer · 2018-07-24 09:33:57Z

1

You need to flatMap the images first, before mapping the main attributes. See the working demo below:

let customJSON = {
  "1894873974": {
    title: "Yellow",
    images: [{
        main: "/images/img1.jpg",
        alt: "image alt tag"
      },
      {
        main: "/images/img2.jpg",
        alt: "image alt tag"
      }
    ]
  },
  "2397423987": {
    title: "Orange",
    images: [{
      main: "/images/img1.jpg",
      alt: "image alt tag"
    }]
  }
}

let result = _(customJSON)
  .flatMap('images')
  .map('main')
  .value();

console.log(result);

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

If you need to get only the unique values, apply uniq() before value() as well.

edited Jul 24, 2018 at 9:33

answered Jul 24, 2018 at 9:30

31piy

23.9k6 gold badges51 silver badges69 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Koushik Chatterjee Over a year ago

.values() is not necessary

31piy Over a year ago

@KoushikChatterjee -- thanks for pointing out. Code corrected.

sridhar.. · Accepted Answer · 2018-07-24 09:32:53Z

0

Loop over object keys and map the images..

let customJSON = {
  "1894873974": {
    title: "Yellow",
    images: [
      {
      main: "/images/img1.jpg",
      alt: "image alt tag"
      },
      {
      main: "/images/img2.jpg",
      alt: "image alt tag"
      }
    ]
  },
  "2397423987": {
    title: "Orange",
    images: [
      {
      main: "/images/img1.jpg",
      alt: "image alt tag"
      }
    ]
  }
}

let res = [];
for(var key in customJSON) {
  let images = customJSON[key]['images'];
  res = res.concat(images.map(image => image.main))
}
console.log(res);

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

answered Jul 24, 2018 at 9:32

sridhar..

2,13316 silver badges21 bronze badges

Collectives™ on Stack Overflow

jQuery/Lodash - Get multiple nested json values by key

2 Answers 2

2 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related