How do i map through array to get array of object? - reactjs

I have an array called data. How do i extract sub_data? Just need the sub_data part for each object.
const data = [
{
id: 1,
title: 'Logo'
sub_data: [
{
id: 2,
title: 'Company Logo'
},
{
id: 3,
title: 'Website Logo'
},
]
},
{
id: 2,
title: 'Brands'
sub_data: [
{
id: 25,
title: 'Company Brands'
},
{
id: 3,
title: 'Website Brands'
},
]
}
]
Example output will get two outputs because there is 2 objects:
const subData = [
{
id: 2,
title: 'Company Logo'
},
{
id: 3,
title: 'Website Logo'
},
]
const subData = [
{
id: 25,
title: 'Company Brands'
},
{
id: 3,
title: 'Website Brands'
},
]
Not very sure how to use the map function just to get sub_data in the correct structure

You can use flatMap to get sub_data in one array
const data = [
{
id: 1,
title: 'Logo',
sub_data: [
{
id: 2,
title: 'Company Logo'
},
{
id: 3,
title: 'Website Logo'
},
]
},
{
id: 2,
title: 'Brands',
sub_data: [
{
id: 25,
title: 'Company Brands'
},
{
id: 3,
title: 'Website Brands'
},
]
}
]
const result = data.flatMap(item => item.sub_data)
console.log(result)

If you want an array with the sub_data objects you can just map the original array:
const data = [
{
id: 1,
title: 'Logo',
'sub_data'
: [
{
id: 2,
title: 'Company Logo'
},
{
id: 3,
title: 'Website Logo'
},
]
},
{
id: 2,
title: 'Brands',
sub_data: [
{
id: 25,
title: 'Company Brands'
},
{
id: 3,
title: 'Website Brands'
},
]
}
]
const mappedData = data.flatMap(obj => obj.sub_data)
console.log(mappedData)

Another solution would be to use the .forEach function of javascript.
const subData = [];
data.forEach(item => subData.push(...item.sub_data))

Related

Find and Replace Value with id from one Array with another nested Array Object in TypeScript

I have an first array like this
[
["Maths", "Chemistry", "Physics"],
["CS", "EC"],
["High", "Medium", "Low", "Average", "Excellent"]
]
And I have an another array of object in the below format
[
[{
id: 1,
name: "Maths",
is_active: 1
},
{
id: 2,
name: "Chemistry",
is_active: 1
},
{
id: 3,
name: "Physics",
is_active: 1
},
{
id: 4,
name: "Social Science",
is_active: 1
}
],
[{
id: 10,
name: "CS",
is_active: 1
},
{
id: 11,
name: "EC",
is_active: 1
},
{
id: 12,
name: "PHY",
is_active: 1
},
],
[{
id: 101,
name: "High",
is_active: 1
},
{
id: 102,
name: "Low",
is_active: 1
},
{
id: 103,
name: "Medium",
is_active: 1
},
{
id: 104,
name: "Excellent",
is_active: 1
},
{
id: 105,
name: "Average",
is_active: 1
},
{
id: 106,
name: "Below Average",
is_active: 1
},
]
]
I need to replace the first array values with id by matching the names present in first array with name present in the nested array of objects in second array.
My Final Output need to be in this format
[
[1,2,3],
[10,11],
[101,103,102,105,104]
]
Can Anyone help me how to do this in TypeScript.
I can suggest using map() and find() this :
simpleData is your table containing only the names
fullData is your table containing your objects
let fullData = [
[{
id: 1,
name: "Maths",
is_active: 1
},
{
id: 2,
name: "Chemistry",
is_active: 1
},
{
id: 3,
name: "Physics",
is_active: 1
},
{
id: 4,
name: "Social Science",
is_active: 1
}
],
[{
id: 10,
name: "CS",
is_active: 1
},
{
id: 11,
name: "EC",
is_active: 1
},
{
id: 12,
name: "PHY",
is_active: 1
},
],
[{
id: 101,
name: "High",
is_active: 1
},
{
id: 102,
name: "Low",
is_active: 1
},
{
id: 103,
name: "Medium",
is_active: 1
},
{
id: 104,
name: "Excellent",
is_active: 1
},
{
id: 105,
name: "Average",
is_active: 1
},
{
id: 106,
name: "Below Average",
is_active: 1
},
]
]
let simpleData = [
["Maths", "Chemistry", "Physics"],
["CS", "EC"],
["High", "Medium", "Low", "Average", "Excellent"]
]
let newIdTable = [];
for ( let i = 0; i < fullData.length; i++ ) {
let table = simpleData[i].map( ( name ) => {
return fullData[i].find( item => item.name === name ).id
} );
newIdTable.push( table );
}
console.log(newIdTable)
Using find(), if the corresponding object doesn't exist it will return undefined. I didn't test the case here, because I supposed that your object already exist in the fullData table. So you have to modify the code with a condition to handle that case if you need :)

How can i check additional category exist when mapping this array in react js?

Here, SubCategoryDetail contains Additional Category but SubCategoryDetail may not have an Additional Category. I need to check where the Additional Category exists then go to the AdditionalCategoryDetail option if not exist then show SubCategoryDetail products when I'm mapping this array.
categoryDetail: [
{
id: 0,
SubCategoryName: "Sewing Section",
SubCategoryDetail: [
{
id: 0,
AdditionalCategoryName: "Additional Category Name 0",
AdditionalCategoryDetail: [
{
id: 0,
ProductName: 'Product Name 0',
ProductImg: "images/AllCategories/SubCategories/3.png",
Price: '80.00',
Brand: 'Brand'
},
{
id: 1,
ProductName: 'Product Name 1',
ProductImg: "images/AllCategories/SubCategories/4.png",
Price: '70.00',
Brand: 'Brand'
}]
}]
},
{
id: 1,
SubCategoryName: "Cutting Section",
SubCategoryDetail: [
{
id: 0,
ProductName: 'Product Name 0',
ProductImg: "images/AllCategories/SubCategories/2.png",
Price: '100.00',
Brand: 'Brand'
},
{
id: 1,
ProductName: 'Product Name 1',
ProductImg: "images/AllCategories/SubCategories/2.png",
Price: '100.00',
Brand: 'Brand'
}
]
}
]
}
]
You can do something like this.
results = categoryDetail.map(categories => {
return categories.SubCategoryDetail.map(category => {
if (category.hasOwnProperty("AdditionalCategoryDetail")) {
return category.AdditionalCategoryDetail[0]
} else {
return category[0]
}
})[0]
})

Angular 2+ compare differences between 2 arrays

The arrays I have
const users = [
{ id: 1, name: "field 1" },
{ id: 2, name: "field 2" },
{ id: 3, name: "field 3" },
{ id: 4, name: "field 4" },
];
const onlineUsers = [
{ id: 1, name: "field 1" },
{ id: 3, name: "field 3" }
];
I would like to find the online and offline ones by comparing the two series
I want to do:
const userLists = [
{ id: 1, name: "field 1", online: true },
{ id: 2, name: "field 2", online: false },
{ id: 3, name: "field 3", online: true },
{ id: 4, name: "field 4", online: false },
];
Using Array.map and Array.some
const users = [
{ id: 1, name: "field 1" },
{ id: 2, name: "field 2" },
{ id: 3, name: "field 3" },
{ id: 4, name: "field 4" },
];
const onlineUsers = [
{ id: 1, name: "field 1" },
{ id: 3, name: "field 3" }
];
var retVal=users.map(u=>{
var isOnline=onlineUsers.some(ou=> ou.id==u.id);//this will check if onlineUsers have some record with given userid
return {...u,online:isOnline}
})
console.log(retVal)
You can just traverse through the user list and you can find out the onlineuser using find and just push it in the onlineuserList.
const users = [
{ id: 1, name: "field 1" },
{ id: 2, name: "field 2" },
{ id: 3, name: "field 3" },
{ id: 4, name: "field 4" },
];
const onlineUsers = [
{ id: 1, name: "field 1" },
{ id: 3, name: "field 3" }
];
const userLists = [];
users.forEach(user => {
if(onlineUsers.find(q => q.id == user.id)){
userLists.push({
id: user.id,
name: user.name,
online: "true"
})
}
else{
userLists.push({
id: user.id,
name: user.name,
online: "false"
})
}
})
console.log(userLists);
a bit faster approach using Array.indexOf() and JSON.strigify()
const onlineUsers = JSON.stringify([
{ id: 1, name: "field 1" },
{ id: 3, name: "field 3" }
]);
const userList = users.map(user =>
({
...user,
online: onlineUsers.indexOf(JSON.stringify(user)) > -1
})
);
OR if you neither want to change original onlineUsers array nor declare another variable:
const userList = users.map(user =>
({ ...user, online: JSON.stringify(onlineUsers).indexOf(JSON.stringify(user)) > -1 })
);

How to filter multiple objects from a list objects by a property array?

I have a object array in which each object contain an id and a name and a separate array contains a set of ids. I want to filter first array based on the second array.
const data= [
{
id: 1,
name: 'name1'
},
{
id: 2,
name: 'name2'
},
{
id: 3,
name: 'name3'
},
{
id: 4,
name: 'name4'
}
];
const array = [1,3,4];
const expectedResult= [
{
id: 1,
name: 'name1'
},
{
id: 3,
name: 'name3'
},
{
id: 4,
name: 'name4'
}
];
Use .filter and .includes
const data= [
{
id: 1,
name: 'name1'
},
{
id: 2,
name: 'name2'
},
{
id: 3,
name: 'name3'
},
{
id: 4,
name: 'name4'
}
];
const array = [1, 3, 4]
const result = data.filter((item) => {
//gives us items that passes a condition
return array.includes(item.id)
})
console.log(result)

Protractor promise produces array that overrides previous values [duplicate]

This question already has answers here:
JavaScript closure inside loops – simple practical example
(44 answers)
Closed 7 years ago.
I have angular ui grid that I am trying to get values from its cells. Here is my list in table
id name
1 AUSTRIA
2 BELGIUM
3 BULGARIA
4 CROATIA
5 CZECH REPUBLIC
This is code I run:
element(by.id('grid1')).all(by.repeater('(rowRenderIndex, row) in rowContainer.renderedRows track by $index')).then(function (items) {
for (var i = 0; i < items.length; i++) {
var country = <any>{}; //typescript code
self.gridTestUtils.dataCell('grid1', i, 0).getText().then(
function (valueId) {
country.id = valueId
});
self.gridTestUtils.dataCell('grid1', i, 1).getText().then(
function (valueName) {
country.name = valueName;
self.countryList.push(country)
console.log(self.countryList)
});
}
});
And this is result
[ { id: 1, name: 'AUSTRIA' }]
[ { id: 1, name: 'BELGIUM' },
{ id: 1, name: 'BELGIUM' }]
[ { id: 1, name: 'BULGARIA' },
{ id: 1, name: 'BULGARIA' },
{ id: 1, name: 'BULGARIA' } ]
[ { id: 1, name: 'CROATIA' },
{ id: 1, name: 'CROATIA' },
{ id: 1, name: 'CROATIA' },
{ id: 1, name: 'CROATIA' } ]
[ { id: 1, name: 'CZECH REPUBLIC' },
{ id: 1, name: 'CZECH REPUBLIC' },
{ id: 1, name: 'CZECH REPUBLIC' },
{ id: 1, name: 'CZECH REPUBLIC' },
{ id: 1, name: 'CZECH REPUBLIC' } ]
I expect result would look like:
[ { id: 1, name: 'AUSTRIA' }]
[ { id: 1, name: 'AUSTRIA' },
{ id: 1, name: 'BELGIUM' }]
[ { id: 1, name: 'AUSTRIA' },
{ id: 1, name: 'BELGIUM' },
{ id: 1, name: 'BULGARIA' } ]
[ { id: 1, name: 'AUSTRIA' },
{ id: 1, name: 'BELGIUM' },
{ id: 1, name: 'BULGARIA' },
{ id: 1, name: 'CROATIA' } ]
[ { id: 1, name: 'AUSTRIA' },
{ id: 1, name: 'BELGIUM' },
{ id: 1, name: 'BULGARIA' },
{ id: 1, name: 'CROATIA' },
{ id: 1, name: 'CZECH REPUBLIC' } ]
What is wrong with my code? What should I do that I have expected array
The problem is that i in your loop changes as the loops goes through, and in your async calls you are using i and getting a promise, but it's only a reference, so at the time the promises get resolved, the will have the reference to the variable with the last value of the loop. A workaround is to create an IIFE:
element(by.id('grid1')).all(by.repeater('(rowRenderIndex, row) in rowContainer.renderedRows track by $index')).then(function (items) {
for (var i = 0; i < items.length; i++) {
var country = <any>{}; //typescript code
(function (i, country) {
self.gridTestUtils.dataCell('grid1', i, 0).getText().then(function (valueId) {
country.id = valueId;
});
self.gridTestUtils.dataCell('grid1', i, 1).getText().then(function (valueName) {
country.name = valueName;
self.countryList.push(country)
console.log(self.countryList)
});
})(i, country);
}
});

Resources