若对象的名称和另一个名称相等，则React js从对象中获取子对象

如果对象名称与另一个名称相等，我将尝试从对象中获取子数组。阵列为：

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"]

我试着用map方法在数组上循环，但我没有得到任何结果

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

selectedObject可以有多个类似这样的名称：const selectedObject = ["level 1 - 111", "level 2 - 111"]，在这种情况下应该记录两个对象。

使用Array.some，您可以检查至少一个匹配。当有多个选定的对象时，这应该起作用：

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

根据Nick Parsons的评论，使用包括相同输出中的结果：

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

在这种情况下，

Array.reduce在这里会更合适。因为Array.map将为输入数组的每个节点返回一个响应。这将不利于显示未定义的值。

使用Array.reduce和Array.some来检查名称列表中是否存在该名称。

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);

编辑

如果testData是一个Object，则不需要循环逻辑。您可以简单地使用Array.some或Array.includes检查其名称是否包含在阵列中

工作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);

您应该在使用selectObject[0]时将索引添加到它，因为它是一个数组

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

而且应该是item.children

您不需要在testData上使用.map()。相反，在SelectedObject数组上运行循环，以便获得所有项的相应值。然后，您不能使用.find()从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);

filter那些对象名称包含在selectedObject数组中的对象，然后map通过该数组并返回子对象。

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);

试试这个

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

下面是一个工作示例https://stackblitz.com/edit/node-7sa9im

相关内容

最新更新

热门标签：