Filter an array of objects with a second array with multiple values

Question

I am trying to write a function to take the first object in the "parent" array, pull out the child field (which is in that array) and use that field to filter the second object called "child".

I want to get all the related records from the child object that are in the child field in the parent object.

Expected output

  child: [
    {
      **id: 1,**
      name: 'Jimmy Yukka',
    },
    {
      **id: 2,**
      name: 'Up North',
    }

INPUT

 Parent: [
    {
      **id: 1,**
      name: 'Melbourne Bands',
      **child: [1, 2]**
    }

I have the following data

 Parent: [
    {
      **id: 1,**
      name: 'Melbourne Bands',
      **child: [1, 2]**
    },
    {
      id: 2,
      name: 'Sydney Bands',
      child: [3]
    }
  ],
  child: [
    {
      **id: 1,**
      name: 'Jimmy Yukka',
    },
    {
      **id: 2,**
      name: 'Up North',
    },
    {
      id: 3,
      url: 'jimmyyukka.com',
      name: 'INXS',
      CreatedByUserId: 1
    }
  ],

The code of the function I have implemented so far:

  currentChildrenIds(ParentId, parentData, childData) {
    const singleParentRecord = parentData.filter(function(parent) {
      return parent.id === ParentId;
    });
    const parentsChildIds = singleParentRecord[0].books;


    const childRecords = childData.filter(function(child) {
      return child.id === parentsChildIds
    });


    return childRecords
  }

NOTES This bit here is where it is wrong

const childRecords = childData.filter(function(child) {
      return child.id === parentsChildIds

This bit here is also a bit rubbish (hardcoding the [0])but not I'm not sure how I should be coding it correctly

 const parentsChildIds = singleParentRecord[0].books;

Answer 1

here,

const childRecords = childData.filter(function(child) {
      return child.id === parentsChildIds

parentsChildIds is a reference to an array: you don't want to test if an id is === to aa reference,

You have to be explicit and check if the id is contained in the array:

const childRecords = childData.filter(function(child) {
          return parentsChildIds.includes(child.id)

Regarding the singleParentRecord[0] that does feel weird, since you know the method filter will always return an array of size 1 or 0, you can use the method find instead of filter

---

Also in functionnal programming (array functions such as filter, map, find...) I advice you to read a bit about the arrow function syntax because:

1. The syntex is more dense and it makes it easier for your brain to understand when several functions are chained
2. If you want to use variables which are defined outside of the function it will be available only inside of an arrow function

your code with an arrow function:

const childRecords = childData.filter((child) => {
          return child.id === parentsChildIds
}

Answer 2

Try this:

 const Parent = [ { id: 1, name: 'Melbourne Bands', child: [1, 2] }, { id: 2, name: 'Sydney Bands', child: [3] } ]; const children = [ { id: 1, name: 'Jimmy Yukka', }, { id: 2, name: 'Up North', }, { id: 3, url: 'jimmyyukka.com', name: 'INXS', CreatedByUserId: 1 } ]; // We create a new array with Array.map const result = Parent.map(parent => ({ // Spread properties of the parent...parent, // Override the child property and filter the children array with the `includes` method child: children.filter(child => parent.child.includes(child.id)), })) console.log(result);