Object is undefined while have data - reactjs

Question

I have an array contains object look like below
[
{
_id: "12",
data: { _id: "123", isDelete: false, name: "afd" },
createdAt: "2020-04-11T08:38:15.966Z",
shop_id: "sfd",
updatedAt: "2020-04-27T02:07:12.271Z"
},
{
_id: "12",
data: { _id: "123", isDelete: false, name: "ffd" },
createdAt: "2020-04-11T08:38:15.966Z",
shop_id: "sfd",
updatedAt: "2020-04-27T02:07:12.271Z"
},
]
This is when I filter in it
brands.filter(brand => {
console.log(brand);// like above data
console.log(brand.data);// show brand.data
console.log(brand.data._id);//error brand.data is not defined
})
I already try
brands.filter(brand => {
let a = brand.data;
console.log(a._id);// error a is null
})
I need to get brand.data.name like when I loop it need to print afd and ffd.

Answer 1

As per your question if all you want to do is to log the value of brand.data.name then using filter doesn't make any sense.
You can just use forEach for that.
const brands = [
{
_id: "12",
data: { _id: "123", isDelete: false, name: "afd" },
createdAt: "2020-04-11T08:38:15.966Z",
shop_id: "sfd",
updatedAt: "2020-04-27T02:07:12.271Z"
},
{
_id: "12",
data: { _id: "123", isDelete: false, name: "ffd" },
createdAt: "2020-04-11T08:38:15.966Z",
shop_id: "sfd",
updatedAt: "2020-04-27T02:07:12.271Z"
}
];
brands.forEach(brand => { console.log(brand.data.name) });
If you want to store the names in an array instead of just logging them then you can use map for that.
const brands = [
{
_id: "12",
data: { _id: "123", isDelete: false, name: "afd" },
createdAt: "2020-04-11T08:38:15.966Z",
shop_id: "sfd",
updatedAt: "2020-04-27T02:07:12.271Z"
},
{
_id: "12",
data: { _id: "123", isDelete: false, name: "ffd" },
createdAt: "2020-04-11T08:38:15.966Z",
shop_id: "sfd",
updatedAt: "2020-04-27T02:07:12.271Z"
}
];
const brandNames = brands.map(brand => brand.data.name);
console.log(brandNames);

Answer 2

Javascript filter works on array. So considering you want to filter your nested object(based on id) which is data, your code should be written like below-
const brands = [
{
_id: "12",
data: { _id: "1", isDelete: false, name: "afd" },
createdAt: "2020-04-11T08:38:15.966Z",
shop_id: "sfd",
updatedAt: "2020-04-27T02:07:12.271Z"
},
{
_id: "13",
data: { _id: "2", isDelete: false, name: "ffd" },
createdAt: "2020-04-11T08:38:15.966Z",
shop_id: "sfd",
updatedAt: "2020-04-27T02:07:12.271Z"
},
]
const updatedBrands = brands.map(brand => {(
...brand, brand.data.filter(key => key._id === '1')
}))
You have to first use javascript map method to iterate over the array and then you can filter your data object by id. Hope this helps.