Filter Nested Array To Get Value in ES6

Question

I need to extract listImages that have a status of 'Existing` inside of an array. My problem is that it gets its parent array.

Data

lists = [
  {
    "listID": "1",
    "listImages": [
      {
        "id": "111",
        "status": "Existing"
      },
      {
        "id": "222",
        "status": "Non-Existing"
      }
    ]
  },
  {
    "listID": "2",
    "listImages": [
      {
        "id": "333",
        "status": "Non-Existing"
      }
    ]
  }
]

Current Code

const images = lists.map((list) => ({
  ...list,
  listImages: (list.listImages?? []).filter(
    ({ status }) => status === "Existing"
  ),
}));

Expected Output

["111"]

Your code doesn't seem to be much helpful as it will return array of objects, whereas you need an array of primitives. I would use Array.prototype.reduce(), like: lists.reduce((acc, {listImages}) => (listImages.forEach(({id, status}) => status === 'Existing' && acc.push(id)), acc), []) — Yevhen Horbunkov
– Yevhen Horbunkov, Commented Nov 26, 2021 at 8:21

Ricky Mo · Accepted Answer · 2021-11-26 08:24:33Z

3

Looks like you just want to get the id. Simply do filter followed by a map for each list. If you want to do this process on all lists and merge the arrays to one, use flatMap.

lists = [
  {
    "listID": "1",
    "listImages": [
      {
        "id": "111",
        "status": "Existing"
      },
      {
        "id": "222",
        "status": "Non-Existing"
      }
    ]
  },
  {
    "listID": "2",
    "listImages": [
      {
        "id": "333",
        "status": "Non-Existing"
      }
    ]
  }
];

const images = lists.flatMap( list => list.listImages.filter(image => image.status === "Existing").map(image => image.id));
console.log(images);

answered Nov 26, 2021 at 8:24

Ricky Mo

7,7682 gold badges22 silver badges41 bronze badges

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

2 Comments

Yevhen Horbunkov Over a year ago

Your code will loop unnecessarily twice over each item of each listImages array: first time - to find the matching items and second time to extract the id. For large number of items that may become a performance issue.

Yevhen Horbunkov Over a year ago

Just to have an idea of how much you may hurt performance with those unnecessary iterations: jsbench.me/dwkwg5eayd/1

Vakho Nakashidze · Accepted Answer · 2021-11-26 08:42:57Z

0

Here you have both imperative and declarative solutions. You can change named functions to arrow functions and make it even a single line but I don't think that we have to follow that ugly coding style where no one (not even future you) understands the code.

lists = [
  {
    "listID": "1",
    "listImages": [
      {
        "id": "111",
        "status": "Existing"
      },
      {
        "id": "222",
        "status": "Non-Existing"
      }
    ]
  },
  {
    "listID": "2",
    "listImages": [
      {
        "id": "333",
        "status": "Non-Existing"
      }
    ]
  }
]

// Imperative solution
const images = [];

lists.forEach(list => {
  list.listImages.forEach(image => {
    if(image.status === 'Existing'){
      images.push(image.id);
    }
  })
});
console.log(images);

// Declarative solution
const data = lists.flatMap(function getAllImages(list){
   return list.listImages;
}).filter(function getExistingImages(image) {
  return image.status === 'Existing';
}).map(function getIds(image){ 
 return image.id
});

console.log(data);

answered Nov 26, 2021 at 8:42

Vakho Nakashidze

513 bronze badges

2 Comments

Yevhen Horbunkov Over a year ago

verbosity !== readability

Vakho Nakashidze Over a year ago

You are saying that the reader should read the function body to understand what function is during. I can't agree there

Collectives™ on Stack Overflow

Filter Nested Array To Get Value in ES6

2 Answers 2

2 Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related