Generate dynamic payload as per nested array item click javascript - javascript

I have this JSON data:
{
"data": [
{
"category": {
"documentId": "c8kr0cv012vtr8vm3iug",
"title": "Art"
},
"subcategories": [
{
"documentId": "c8kr7nv012vtr8vm3l8g",
"title": "Architecture"
},
{
"documentId": "c8kr7nv012vtr8vm3lag",
"title": "Dance"
},
{
"documentId": "c8kr7nv012vtr8vm3lbg",
"title": "Fashion"
}
]
},
{
"category": {
"documentId": "c8kr0cv012vtr8vm3iqg",
"title": "Business"
},
"subcategories": [
{
"documentId": "c8kr3d7012vtr8vm3jjg",
"title": "Crypto"
},
{
"documentId": "c8kr3d7012vtr8vm3jj0",
"title": "Finance"
},
{
"documentId": "c8kr3d7012vtr8vm3jkg",
"title": "Marketing"
}
]
}
]
}
I have tagview in my mobile screen so user can select multiple subcategory at a same time by select deselect so if i choose 2 subcategory from Art and 2 from Business then expected post payload should be like below
{
"data": [
{
"category": "c8kr0cv012vtr8vm3iug",
"subcategories": [
"c8kr7nv012vtr8vm3l8g",
"c8kr7nv012vtr8vm3lag"
]
},
{
"category": "c8kr0cv012vtr8vm3iqg",
"subcategories": [
"c8kr3d7012vtr8vm3jjg",
"c8kr3d7012vtr8vm3jj0"
]
}
]
}
So my code is like below
const tempDefaultPayload = dataPayload.map(x => {
if (x.category) {
x.subcategories?.push(subcategory);
if (userData?.userInterests?.map(v => v.category.documentId === category)) {
const arrayNewData: any = [];
const newData: any = userData?.userInterests?.map(i =>
i.subcategories?.map(k => {
arrayNewData.push(k?.documentId);
return k?.documentId;
}),
);
x.subcategories?.push(...arrayNewData);
}
return x;
}
return x;
})
When I run above code payload is not passing correct
[
{
"category": "c8kr0cv012vtr8vm3iug",
"subcategories": [
"c8kr7nv012vtr8vm3l8g",
"c8kr7nv012vtr8vm3lag",
"c8kr3d7012vtr8vm3jjg",
"c8kr3d7012vtr8vm3jj0"
]
},
{
"category": "c8kr0cv012vtr8vm3iqg",
"subcategories": [
"c8kr7nv012vtr8vm3l8g",
"c8kr7nv012vtr8vm3lag",
"c8kr3d7012vtr8vm3jjg",
"c8kr3d7012vtr8vm3jj0"
]
}
]
It is passing all selected subcategory in both array any idea how can I solve this ?

If you have the selected tag ids in the array selectedTags and your json as a variable called data:
const tempDefaultPayload = {
data: data.data.map(x => {
"category": x.category.documentId,
"subcategories": x.subcategories.map(subcat =>
subcat.documentId).filter(item => selectedTags.includes(item))
})
}
Playground example

Related

javascript print nested array to screen

I have a data array, there are multiple objects in this array, and the data object is an array. There may be more than one object in this array. How can I copy these objects under a single array?
const test = []
const data = [
{
"_id": "124141",
"name": "test",
"data": [
{
"price":10,
"title": "sda"
},
]
},
{
"_id": "2525",
"name": "test2",
"data": [
{
"price":20,
"title": "asdas"
},
]
}
]
[{
"price":10,
"title": "sda"
},
{
"price":20,
"title": "asdas"
},
]
If this is the output I expect, it should be like this. how can I do that
const data = [
{
"_id": "124141",
"name": "test",
"data": [
{
"price":10,
"title": "sda"
},
{
"price":99,
"title":"aaaaa"
}
]
},
{
"_id": "2525",
"name": "test2",
"data": [
{
"price":20,
"title": "asdas"
},
]
}
];
console.log(data.map(e => e.data).flat());
// OR
console.log(data.flatMap(e => e.data));

How can i remove object from nested array?

I have this kind of json.
let arr1 = [
{
"packageReference": "1234",
"displayName": "Business",
"description": "Includes...",
"promotion": {
"packageReference": "1234",
"displayName": "$100 Standard",
"optionGroup": [
{
"displayName": "Access",
},
{
"displayName": "Contract"
},
{
"displayName": "Equipment"
},
{
"displayName": "Features"
},
{
"displayName": "Fees",
}
]
}
}
]
I need to remove only the object in the arr1[0].promotion.optionGroup where the displayName is 'Fees' and to return the new object without him.
You could do it by filtering the sub array like so:
let arr1 = [
{
"packageReference": "1234",
"displayName": "Business",
"description": "Includes...",
"promotion": {
"packageReference": "1234",
"displayName": "$100 Standard",
"optionGroup": [
{
"displayName": "Access",
},
{
"displayName": "Contract"
},
{
"displayName": "Equipment"
},
{
"displayName": "Features"
},
{
"displayName": "Fees",
}
]
}
}
];
arr1 = arr1.map(e => {
e['promotion']['optionGroup'] =
e['promotion']['optionGroup'].filter(s => s['displayName'] != 'Fees');
return e;
});
console.log(arr1);
// Get new array without the Fees one
const newGroup = arr1[0].promotion.optionGroup.filter(group => group.displayName !== 'Fees');
// Put new group into the object
arr1[0].promotion.optionGroup = newGroup;
Could also do it without creating a variable, but added it for cleanness.

push elements of each object inside each object inside another array

I have two arrays, one is my original one called data which consists of :
const datas = [
{
name: 'core Test',
item: [
{
name: 'test/core/core.js',
item: "item1"
}
]
},
{
name: 'users Test',
item: [
{
name: 'test/users/user.js',
item: "item2"
}
]
}
]
And i have another array called replace, which i'm trying to push each of its elements inside my original one, inside the
const replace = [
{
type: "test1",
number: "1",
},
{
type: "test2",
number: "2",
}
]
Here is my code :
const transformedData = datas.map(data => {
data.item = data.item.map(x => ({
name: x.name,
type: replace.map(y=>{return y;})
}))
return data
})
The output i get :
[
{
"name": "core Test",
"item": [
{
"name": "test/core/core.js",
"type": [
{ "type": "test1", "number": "1" },
{ "type": "test2", "number": "2" }
]
}
]
},
{
"name": "users Test",
"item": [
{
"name": "test/users/user.js",
"type": [
{ "type": "test1", "number": "1" },
{ "type": "test2", "number": "2" }
]
}
]
}
]
The output i want :
[
{
"name": "core Test",
"item": [
{
"name": "test/core/core.js",
"type": { "type": "test1", "number": "1" }
}
]
},
{
"name": "users Test",
"item": [
{
"name": "test/users/user.js",
"type": { "type": "test2", "number": "2" }
}
]
}
]
This is because you're mapping all the way through the replace array every single time for each time you're inside of a value inside of datas. Instead you want to keep track of the index with your original map so then you only have one instance each time.
Try something like:
const transformedData = datas.map((data, index) => {
data.item = data.item.map(x => ({
name: x.name,
type: replace[index]
}))
return data;
});

How to group similar sub-items of JSON

I want to group similar sub-item of my Json into one and then merge all their sub-item under that created item.
this is my json file:
{
"car": [
{
"name": "benz",
"details": [
{
"name": "C1",
"year": [
{
"name": "1850",
"errs": [
{
"user": "model-A",
"text": "error text on model-H"
},
{
"user": "model-C",
"text": "error text on model-C"
}
]
},
{
"name": "1820",
"errs": [
{
"user": "model-C",
"text": "error text on model-C"
}
]
}
]
}
]
},
{
"name": "vw",
"details": [
{
"name": "A1",
"year": [
{
"name": "1860",
"errs": []
},
{
"name": "1870",
"errs": [
{
"user": "model-A",
"text": "error text on model-H"
}
]
}
]
},
{
"name": "A2",
"year": [
{
"name": "1910",
"errs": []
},
{
"name": "1950",
"errs": [
{
"user": "model-A",
"text": "error text on model-H"
}
]
}
]
}
]
}
]
}
my tree structure is based on label and children, so my parent item is label and sub tree is children.
and this is my ts file:
ngOnInit():void {
this.http.get('.car.json').subscribe((data) => {
data.car.forEach((carItem) => {
carItem.details.forEach((detail) => {
const errorsTree = {};
detail.year.forEach((year) => {
year.errs.forEach((err) => {
let userNode;
let carNode;
let detailNode;
if (errorsTree[err.userAgent]) {
userNode = errorsTree[err.userAgent];
} else {
userNode = {name: err.userAgent, cars: {}};
errorsTree[err.userAgent] = userNode;
}
const components = userNode.cars;
if (components[carItem.name]) {
carNode = cars[carItem.name];
} else {
carNode = {name: carItem.name, details: {}};
components[carItem.name] = carNode;
}
const detailsItems = carNode.details;
if (detailsItems[detail.name]) {
detailNode = detailsItems[detail.name];
} else {
detailNode = {name: detail.name, tests: {}};
detailsItems[detail.name] = detailNode;
}
detailNode.tests[test.name] = test;
this.TreeModel.push({
label: userNode.name,
children: _.values(userNode.cars).map((car) => {
return {
label: car.name,
children: _.values(car.details).map((deta) => {
return {
label: deta.name,
children: _.values(deta.tests).map((testItem) => {
return {
label: testItem.name,
err: err.text
};
})
};
})
};
})
});
});
});
});
});
});
}
after running the code the tree will be like this:
model-A
benz
C1
model-C
benz
C1
model-C
benz
C1
model-A
vw
A1
model-A
vw
A2
but it is not correct, the result should be like following:
[
{
label: 'model-A',
children: [
{
label: 'benz',
children: [
{
label: 'C1'
}
]
},
{
label: 'vw',
children: [
{
label: 'A1'
},
{
label: 'A2'
}
]
}
]
},
{
label: 'model-C',
children: [
{
label: 'benz',
children: [
{
label: 'C1'
}
]
}
]
}
]
do you have i idea how to group this Json like the above structure with Angular 5
thanks.
You can use something like this -
var processedJSON = {};
const data = {
"car": [{
"name": "benz",
"details": [{
"name": "C1",
"year": [{
"name": "1850",
"errs": [{
"user": "model-A",
"text": "error text on model-H"
},
{
"user": "model-C",
"text": "error text on model-C"
}
]
},
{
"name": "1820",
"errs": [{
"user": "model-C",
"text": "error text on model-C"
}]
}
]
}]
},
{
"name": "vw",
"details": [{
"name": "A1",
"year": [{
"name": "1860",
"errs": []
},
{
"name": "1870",
"errs": [{
"user": "model-A",
"text": "error text on model-H"
}]
}
]
},
{
"name": "A2",
"year": [{
"name": "1910",
"errs": []
},
{
"name": "1950",
"errs": [{
"user": "model-A",
"text": "error text on model-H"
}]
}
]
}
]
}
]
};
data.car.forEach(function(car, i) {
car.details.forEach(function(detail, j) {
detail.year.forEach(function(year, k) {
year.errs.forEach(function(element, l) {
if (!processedJSON[element.user]) {
processedJSON[element.user] = {};
}
if (!processedJSON[element.user][car.name]) {
processedJSON[element.user][car.name] = [];
}
if (processedJSON[element.user][car.name].indexOf(detail.name) == -1) {
processedJSON[element.user][car.name].push(detail.name);
}
});
});
});
});
console.log(processedJSON);
You can structure your data using array#reduce with multiple array#forEach, then from this result, use array#map with Object.keys() to get the final format.
const data = { "car": [ { "name": "benz", "details": [ { "name": "C1", "year": [ { "name": "1850", "errs": [ { "user": "model-A", "text": "error text on model-H" }, { "user": "model-C", "text": "error text on model-C" } ] }, { "name": "1820", "errs": [ { "user": "model-C","text": "error text on model-C" } ] } ] } ] }, { "name": "vw", "details": [ { "name": "A1", "year": [ { "name": "1860", "errs": [] }, { "name": "1870", "errs": [ { "user": "model-A", "text": "error text on model-H" } ] } ] }, { "name": "A2", "year": [{ "name": "1910", "errs": [] }, { "name": "1950", "errs": [ { "user": "model-A", "text": "error text on model-H" } ] } ] } ] } ] },
result = data.car.reduce((r, {name, details}) => {
details.forEach(o1 => {
o1.year.forEach(o2 => {
o2.errs.forEach(({user, text}) => {
r[user] = r[user] || {};
r[user][name] = r[user][name] || [];
if(!r[user][name].includes(o1.name))
r[user][name].push(o1.name);
});
});
});
return r;
},{});
const output = Object.keys(result).map(k => ({label : k, children : Object.keys(result[k]).map(key => ({label: key, children : result[k][key].map(([label]) => ({label}) ) }) ) }) );
console.log(output);

Building new JSON from existing one

I want to build an new JSON from existing one. The source has sections and rubrics that I no longer need for a listing. The new object called 'items' should have an array of the items.
The final JSON should be sorted by attribute 'name' and look like
{
"items": [
{
"id": 10000006,
"name": "Boah"
},
{
"id": 10000013,
"name": "Gut"
},
{
"id": 10000003,
"name": "Ipsum"
},
{
"id": 10000001,
"name": "Lorem"
},
{
"id": 10000005,
"name": "Lorum"
},
{
"id": 10000004,
"name": "Name"
},
{
"id": 10000002,
"name": "Stet"
}
]
}
For building the new JSON I get this source:
{
"sections": [
{
"name": "FooBar",
"rubrics": [
{
"name": "Foo",
"items": [
{
"id": 10000001,
"name": "Lorem"
},
{
"id": 10000002,
"name": "Stet"
},
{
"id": 10000003,
"name": "Ipsum"
}
]
},
{
"name": "Bar",
"items": [
{
"id": 10000004,
"name": "Name"
},
{
"id": 10000005,
"name": "Lorum"
},
{
"id": 10000006,
"name": "Boah"
}
]
}
]
},
{
"name": "BlahBloob",
"rubrics": [
{
"name": "Bla",
"items": [
{
"id": 10000013,
"name": "Gut"
}
]
},
{
"name": "Bloob",
"items": [
{
"id": 10000014,
"name": "Name"
},
{
"id": 10000015,
"name": "Lorem"
}
]
}
]
}
]
}
What do you think? How can I do this with plain JavaScript or maybe TypeScript?
Thanks for reading and have time for my question. And thanks for reply in advance.
Here you go. You just need to iterate over each rubric of each section of your source to get the items. At the end, sort your list of items by items, and you're done.
This example uses ES6 syntax, but it's easy to convert it to ES5 if needed.
function extractItems(source) {
const items = [];
for (const section of source.sections) {
for (const rubric of section.rubrics) {
items.push(...rubric.items);
}
}
items.sort((a, b) => a.name.localeCompare(b.name));
return { items };
}
A more functional approach use map and reduce to pick the rubrics and merge them.
data.sections
.map(section => section.rubrics) // get rubrics
.reduce((a, b) => a.concat(b)) // merge rubrics
.map(rubric => rubric.items) // get items from each rubric
.reduce((a, b) => a.concat(b)) // merge items
.sort((a, b) => a.name.localeCompare(b.name)); // sort
function(oldObj) {
var newObj = {
"items": []
};
oldObj.sections.forEach(function(section) {
section.rubrics.forEach(function(rubric) {
rubric.items.forEach(function(item) {
newObj.items.push(item);
});
});
});
newObj.items = newObj.items.sort(function(a, b) {
if (a.name < b.name) { return -1; }
if (a.name > b.name) { return 1; }
return 0;
});
return newObj;
}
And simply use JSON.parse() and JSON.stringify() to convert JSON to and from objects.
It might help you
var data ={
"sections": [
{
"name": "FooBar",
"rubrics": [{"name": "Foo", "items": [{"id": 10000001,"name": "Lorem"}, {"id": 10000002,"name": "Stet"}, {"id": 10000003,"name": "Ipsum"}]
}, {
"name": "Bar",
"items": [{
"id": 10000004,
"name": "Name"
}, {
"id": 10000005,
"name": "Lorum"
}, {
"id": 10000006,
"name": "Boah"
}]
}]
}, {
"name": "BlahBloob",
"rubrics": [{
"name": "Bla",
"items": [{
"id": 10000013,
"name": "Gut"
}]
}, {
"name": "Bloob",
"items": [{
"id": 10000014,
"name": "Name"
}, {
"id": 10000015,
"name": "Lorem"
}]
}]
}]
};
var itemObj = {};
var itemArr = [];
var sections = data.sections;
for(var i=0;i<sections.length;i++)
{
for(var j=0;j<sections[i].rubrics.length;j++){
for(var k=0;k<sections[i].rubrics[j].items.length;k++){
var itemObj;
itemObj['id'] = sections[i].rubrics[j].items[k].id;
itemObj['name'] = sections[i].rubrics[j].items[k].name;
itemArr.push(itemObj);
}
}
}
var finalObj = {"items":itemArr};
console.log(finalObj);
JSFiddle

Categories

Resources