React js get children from object if name of object is equal with another-CodePudding

I am trying to get children array from the object if object name is equal with another name. The array is:

const testDataTwo = {
    name: 'level 1 - 111',
    date: 'level 1 - 222',
    children: [
      { a3: 'level 1 - 5551', b3: 'level 1 - 6661' },
      { a3: 'level 1 - 5552', b3: 'level 1 - 6662' },
      { a3: 'level 1 - 5553', b3: 'level 1 - 6663' },
      { a3: 'level 1 - 5554', b3: 'level 1 - 6664' },
      { a3: 'level 1 - 5555', b3: 'level 1 - 6665' },
      { a3: 'level 1 - 5556', b3: 'level 1 - 6666' }
    ]
  }

// This is for old question
const testData = [
  {
    name: 'level 1 - 111',
    date: 'level 1 - 222',
    children: [
      { a3: 'level 1 - 5551', b3: 'level 1 - 6661' },
      { a3: 'level 1 - 5552', b3: 'level 1 - 6662' },
      { a3: 'level 1 - 5553', b3: 'level 1 - 6663' },
      { a3: 'level 1 - 5554', b3: 'level 1 - 6664' },
      { a3: 'level 1 - 5555', b3: 'level 1 - 6665' },
      { a3: 'level 1 - 5556', b3: 'level 1 - 6666' }
    ]
  },
  {
    name: 'level 2 - 111',
    date: 'level 2 - 222',
    children: [
      { a3: 'level 2 - 5551', b3: 'level 2 - 6661' },
      { a3: 'level 2 - 5552', b3: 'level 2 - 6662' },
      { a3: 'level 2 - 5553', b3: 'level 2 - 6663' },
      { a3: 'level 2 - 5554', b3: 'level 2 - 6664' },
      { a3: 'level 2 - 5555', b3: 'level 2 - 6665' },
      { a3: 'level 2 - 5556', b3: 'level 2 - 6666' }
    ]
  }
];

const selectedObject = ["level 1 - 111"]

I tried with map method to loop on the array but I am not getting any result

console.log(testData.map((item) => (item.name === selectedObject ? item.child : '')));

selectedObject can have more than one name like this: const selectedObject = ["level 1 - 111", "level 2 - 111"] and in that case should be logged two objects.

CodePudding user response：

Using Array.some you can check for at least one match. This should then work when having multiple selected objects:

console.log(testData.map((item) => (selectedObject.some((obj => obj === item.name)) ? item.children : '')))

As per Nick Parsons comment, Using includes results in the same output:

testData.map((item) => (selectedObject.includes(item.name) ? item.children : ''))

CodePudding user response：

You ought to add the index to the selectObject[0] while using it because it's an array

console.log(testData.map((item) => (item.name === selectedObject[0] ? 
item.children : '')));

And also it should be item.children

CodePudding user response：

You don't need to .map() over testData. Instead run your loop over SelectedObject array so you get a corresponding value for all items. You cant then use .find() to get your required array item from testData.

const testData = [
  {
    name: 'level 1 - 111',
    date: 'level 1 - 222',
    children: [
      { a3: 'level 1 - 5551', b3: 'level 1 - 6661' },
      { a3: 'level 1 - 5552', b3: 'level 1 - 6662' },
      { a3: 'level 1 - 5553', b3: 'level 1 - 6663' },
      { a3: 'level 1 - 5554', b3: 'level 1 - 6664' },
      { a3: 'level 1 - 5555', b3: 'level 1 - 6665' },
      { a3: 'level 1 - 5556', b3: 'level 1 - 6666' }
    ]
  },
  {
    name: 'level 2 - 111',
    date: 'level 2 - 222',
    children: [
      { a3: 'level 2 - 5551', b3: 'level 2 - 6661' },
      { a3: 'level 2 - 5552', b3: 'level 2 - 6662' },
      { a3: 'level 2 - 5553', b3: 'level 2 - 6663' },
      { a3: 'level 2 - 5554', b3: 'level 2 - 6664' },
      { a3: 'level 2 - 5555', b3: 'level 2 - 6665' },
      { a3: 'level 2 - 5556', b3: 'level 2 - 6666' }
    ]
  }
  ]
  
  
  const selectedObject = ["level 1 - 111", "level 2 - 111"]

let ans = [];
selectedObject.forEach((x) => {
let foundItem = testData.find( a => a.name === x);
if(foundItem!== undefined){
ans.push(foundItem.children);
}
});

console.log(ans);

CodePudding user response：

filter those objects where the object name is included in the selectedObject array, and then map over that array and return the children.

const testData=[{name: 'level 0 - 111', date: 'level 0 - 222', children: [{a3: 'level 0 - 5551', b3: 'level 0 - 6661'},{a3: 'level 0 - 5552', b3: 'level 0 - 6662'},{a3: 'level 0 - 5553', b3: 'level 0 - 6663'},{a3: 'level 0 - 5554', b3: 'level 0 - 6664'},{a3: 'level 0 - 5555', b3: 'level 0 - 6665'},{a3: 'level 0 - 5556', b3: 'level 0 - 6666'}]},{name: 'level 1 - 111', date: 'level 1 - 222', children: [{a3: 'level 1 - 5551', b3: 'level 1 - 6661'},{a3: 'level 1 - 5552', b3: 'level 1 - 6662'},{a3: 'level 1 - 5553', b3: 'level 1 - 6663'},{a3: 'level 1 - 5554', b3: 'level 1 - 6664'},{a3: 'level 1 - 5555', b3: 'level 1 - 6665'},{a3: 'level 1 - 5556', b3: 'level 1 - 6666'}]},{name: 'level 2 - 111', date: 'level 2 - 222', children: [{a3: 'level 2 - 5551', b3: 'level 2 - 6661'},{a3: 'level 2 - 5552', b3: 'level 2 - 6662'},{a3: 'level 2 - 5553', b3: 'level 2 - 6663'},{a3: 'level 2 - 5554', b3: 'level 2 - 6664'},{a3: 'level 2 - 5555', b3: 'level 2 - 6665'},{a3: 'level 2 - 5556', b3: 'level 2 - 6666'}]},{name: 'level 3 - 111', date: 'level 3 - 222', children: [{a3: 'level 3 - 5551', b3: 'level 3 - 6661'},{a3: 'level 3 - 5552', b3: 'level 3 - 6662'},{a3: 'level 3 - 5553', b3: 'level 3 - 6663'},{a3: 'level 3 - 5554', b3: 'level 3 - 6664'},{a3: 'level 3 - 5555', b3: 'level 3 - 6665'},{a3: 'level 3 - 5556', b3: 'level 3 - 6666'}]}];
const selectedObject = ["level 1 - 111", "level 3 - 111"];

const result = testData
  .filter(obj => selectedObject.includes(obj.name))
  .map(obj => obj.children)
  
console.log(result);

CodePudding user response：

Array.reduce will be more apt here in this case. Because Array.map will return a response for each node of the input array. That will be not good for showing undefined values.

Use Array.reduce with Array.some to check if the name is present in a list of names.

const testData = [
  {
    name: 'level 1 - 111',
    date: 'level 1 - 222',
    children: [
      { a3: 'level 1 - 5551', b3: 'level 1 - 6661' },
      { a3: 'level 1 - 5552', b3: 'level 1 - 6662' },
      { a3: 'level 1 - 5553', b3: 'level 1 - 6663' },
      { a3: 'level 1 - 5554', b3: 'level 1 - 6664' },
      { a3: 'level 1 - 5555', b3: 'level 1 - 6665' },
      { a3: 'level 1 - 5556', b3: 'level 1 - 6666' }
    ]
  },
  {
    name: 'level 2 - 111',
    date: 'level 2 - 222',
    children: [
      { a3: 'level 2 - 5551', b3: 'level 2 - 6661' },
      { a3: 'level 2 - 5552', b3: 'level 2 - 6662' },
      { a3: 'level 2 - 5553', b3: 'level 2 - 6663' },
      { a3: 'level 2 - 5554', b3: 'level 2 - 6664' },
      { a3: 'level 2 - 5555', b3: 'level 2 - 6665' },
      { a3: 'level 2 - 5556', b3: 'level 2 - 6666' }
    ]
  }
];

const selectedObject = ["level 1 - 111"];
const response = testData.reduce((acc, curr) => {
  if (selectedObject.some((node) => node === curr.name)) {
    acc.push(curr.children);
  }
  return acc
}, []);
console.log(response);

Edit

If the testData is an Object, there is no need for a looping logic. You could simply check whether its name is included in the array using Array.some or Array.includes

Working Fiddle

const testDataTwo = {
  name: 'level 1 - 111',
  date: 'level 1 - 222',
  children: [
    { a3: 'level 1 - 5551', b3: 'level 1 - 6661' },
    { a3: 'level 1 - 5552', b3: 'level 1 - 6662' },
    { a3: 'level 1 - 5553', b3: 'level 1 - 6663' },
    { a3: 'level 1 - 5554', b3: 'level 1 - 6664' },
    { a3: 'level 1 - 5555', b3: 'level 1 - 6665' },
    { a3: 'level 1 - 5556', b3: 'level 1 - 6666' }
  ]
};
const selectedObject = ["level 1 - 111"];
const response = [];
if (selectedObject.some((node) => node === testDataTwo.name)) {
  response.push(testDataTwo.children);
}
console.log(response);

CodePudding user response：

Try this

function getLevelsByName(selectedObject, testData) {
  const result = [];

  for (let item of selectedObject) {
    const objectFound = testData.find((c) => c.name == item);
    if (objectFound) {
      result.push(objectFound); // you can push objectFound.children if you only want children of object
    }
  }

  return result;
}

console.log(getLevelsByName(selectedObject, testData));  //logs selected objects

Here is a working example https://stackblitz.com/edit/node-7sa9im