Find Object Inside Array of Object Array

Question

I currently have an array of objects with each containing an array of objects.

My goal is to find a nested object in a single line of javascript code. I am trying to avoid a nested loop, I know how to solve it that way but javascript offers a lot of elegant solutions for such scenarios.

This is how my data looks like:

const items = [
    {
        id: 1,
        title: 'Test 1',
        data: [
            {
                id: 3,
                title: 'Test 3',
            },
            {
                id: 4,
                title: 'Test 4',
            },
        ],
    },
    {
        id: 2,
        title: 'Test 2',
        data: [
            {
                id: 5,
                title: 'Test 5',
            },
        ],
    },
];

With a nested loop:

let item = null;
for (let i = 0; i<items.length; i++) {
    for (let j = 0; j<items[i].data; j++) {
        if (items[i].data[j].id == myId) {
            item = items[i].data[j];
            return;
        }
    }
}

I feel like there is a more simplistic and prettier solution than this.

I know how to use it on flat structures but I am unsure about nested structures. Would you mind elaborating? Sorry if this is a silly question, I am not an expert in javascript. — Tom el Safadi
– Tom el Safadi, Commented Feb 17, 2021 at 4:38
const item = items.find((parent) => parent.data.find((child) => child.id === id)); This is what I tried but it returns the parent with all its children. — Tom el Safadi
– Tom el Safadi, Commented Feb 17, 2021 at 4:46
let item; for (const { data } of items) { if (item = data.find(e => e.id === myID)) break; }, or write a more general function for it. — ASDFGerte
– ASDFGerte, Commented Feb 17, 2021 at 4:54
why do you want it in one of code?, Focus on Optimizing the logic, not lines of code. — Naren
– Naren, Commented Feb 17, 2021 at 4:55

hgb123 · Accepted Answer · 2021-02-17 04:46:58Z

2

You could do that in one line. As I saw in your nested loop solution, you find in each object's data, so first you could flatten the data in to array of objects and then find through that array

const items = [
  {
    id: 1,
    title: "Test 1",
    data: [
      {
        id: 3,
        title: "Test 3",
      },
      {
        id: 4,
        title: "Test 4",
      },
    ],
  },
  {
    id: 2,
    title: "Test 2",
    data: [
      {
        id: 5,
        title: "Test 5",
      },
    ],
  },
];

const myId = 4;

const res = items.flatMap((item) => item.data).find(({ id }) => id === myId);

console.log(res);

answered Feb 17, 2021 at 4:46

hgb123

14.9k3 gold badges24 silver badges43 bronze badges

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

1 Comment

Dom Over a year ago

Good solution. Just a minor callout, this is not supported in IE. if that's not a problem, then this would be a good option - developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/…

Nguyễn Văn Phong · Accepted Answer · 2021-04-08 06:54:56Z

1

In terms of performance, I would suggest the way is to use Array#reduce combined with Array#find

const items = [{id:1,title:"Test 1",data:[{id:3,title:"Test 3",},{id:4,title:"Test 4",},],},{id:2,title:"Test 2",data:[{id:5,title:"Test 5",},],},];

const myId = 4;
const res = items.reduce((acc, {data}) => {
  const foundItem = data.find(({id}) => id === myId);
  if(foundItem)
    acc.push(foundItem);
  
  return acc;
}, [])

console.log(res);

answered Apr 8, 2021 at 6:54

Nguyễn Văn Phong

14.2k19 gold badges47 silver badges65 bronze badges

Collectives™ on Stack Overflow

Find Object Inside Array of Object Array

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related