How can I flatten nested arrays in JavaScript? - javascript

I have complicated array with nested arrays.
For example if I want to get data from last array then I have to write:
partners[0].products[0].campaigns[0].nameCampaign or .type or .price etc.
I'd like to flatten this array. And this is what I expect:
Is it possible at all?
#EDIT
This is part of console.log(JSON.stringify(partners, 0, 4));:
[{
"_id": "57727902d0a069e41a34eece",
"namePartner": "Self",
"products": [{
"_id": "57727910d0a069e41a34eed0",
"nameProduct": "Singl",
"campaigns": [{
"_id": "57727937d0a069e41a34eed1",
"type": "lead",
"nameCampaign": "Camp 0"
}]
}, {
"_id": "5774cb68c594b22815643b37",
"nameProduct": "DrugiPartner"
"campaigns": [{
"_id": "5774cb78c594b22815643b38",
"type": "subscription",
"nameCampaign": "DrugaKampania"
}, {
"_id": "5774cbedc594b22815643b3a",
"type": "subscription",
"nameCampaign": "TrzeciaKampania"
}, {
"_id": "5774cbf9c594b22815643b3b",
"type": "subscription",
"nameCampaign": "CzwartaKampania"
}]
}, {
"_id": "5774cbdbc594b22815643b39",
"nameProduct": "Trzeci"
"campaigns": []
}]
}]

In plain Javascript you could use an array with the references to the wanted items and the arrays and use an iterative recursive approach to get the wanted array.
Edit
For more than one property to add, you could use an array for more than one item.
One property:
{ use: 'namePartner' }
Multiple properties:
{ use: ['nameCampains', 'type'] }
function iter(a, r, l) {
if (Array.isArray(a)) {
a.forEach(function (b) {
var use = level[l].use,
rr = JSON.parse(JSON.stringify(r));
(Array.isArray(use) && use || [use]).forEach(function (c) {
rr[c] = b[c];
});
iter(b[level[l].array], rr, l + 1);
});
return;
}
result.push(r);
}
var partners = [{ namePartner: 'Tesco', products: [{ nameProduct: 'New', campains: [{ nameCampains: 'Apple', type: 'appleType' }, { nameCampains: 'Lenovo', type: 'lenovoType' }] }] }, { namePartner: 'Eko', products: [{ nameProduct: 'Fresh', campains: [{ nameCampains: 'Asus', type: 'asusType' }, { nameCampains: 'Dell', type: 'dellType' }] }, { nameProduct: 'new', campains: [{ nameCampains: 'Samsung', type: 'samsungType' }] }] }],
level = [{ use: 'namePartner', array: 'products' }, { use: 'nameProduct', array: 'campains' }, { use: ['nameCampains', 'type'] }],
result = [];
iter(partners, {}, 0);
console.log(result);

You could use get from lodash:
var CAMPAIGN_NAME_PATH = ['partners', 0, 'products', 0, 'campaigns', 0, 'nameCampaig'];
var campaignName = _.get(JSONObject, CAMPAIGN_NAME_PATH, 'optionalDefaultCampaignName');
Or you could try playing with flatten, flattenDeep and flattenDepth and rearrange the JSON object structure first before accessing it (note that these three methods only work on arrays, not key-value objects).

Related

how to foreach array to array object in javascript

I'm very confused about doing foreach array to array object in Javascript, I already did a lot of research about foreach object in Javascript and I tried many ways but nothing works. All that I'm trying to achieve is to have data JSON like this :
[
{
"name": "First Data",
"data": [
{
"y": 95,
"total":100,
"md": "1",
"name": "National",
"drillup" : 'level0',
"drilldown" : "3",
"next" : "level2"
}
]
}
,{
"name": "Second Data",
"data": [
{
"y": 95,
"total":100,
"md": "1",
"name": "National",
"drillup" : 'National',
"drilldown" : "3",
"next" : "level2"
}
]
}
]
and I tried to do foreach based on some finding of my research but the result wasn't like what I want or like what I'm try to achieve ..
and here is the script that I tried :
dataFirstSecond = await informationModel.getdata();
Object.entries(dataRegularSecondary).forEach(entry => {
const [key, value] = entry;
returnData[key] = [
{
name: value.name,
data: [{
y: value.y,
total: value.total_ada,
next: 'level_2',
drilldown: true,
}]
}]
});
and here is the result or the output of my script that I try it :
{
"0": [
{
"name": "First Data",
"data": [
{
"y": 22.973,
"total": 17,
"next": "level_2",
"drilldown": true
}
]
}
],
"1": [
{
"name": "Second Data",
"data": [
{
"y": 5.4054,
"total": 4,
"next": "level_2",
"drilldown": true
}
]
}
]
}
can someone help me to achieve the data that I want?
returnData[key] = [{ ... }] should just be returnData.push({ ... }), and make sure returnData is an array (e.g. returnData = [])
If the function informationModel.getdata(); returns an Object you could use the method JSON.stringify(Object) to easily convert and Object to JSON. For example you could try to do to convert this Object to a String then cast the String to JSON.
let JSONString = JSON.stringify(informationModel.getdata());
let JSON_Object = JSON.parse(JSONString);
If dataRegularSecondary is an array and not an object you could use map:
dataRegularSecondary.map(value => {
return {
name: value.name,
data: [{
y: value.y,
total: value.total_ada,
next: 'level_2',
drilldown: true,
}]
}
}
Your question is how to forEach array to array object. Then that means dataRegularSecondary is an array, right? Object.entries returns an array of key value pairs. If you pass an array to that method, it will return the indices as keys and the items as values.
const arr = ['hello', 'world'];
Object.entries(arr); // [['0', 'hello'], ['1', 'world']]
Skip the Object.entries and use dataRegularSecondary directly for forEach.
As for your output, it looks like returnData is an object as well. Make sure it's an array and just push the data into that.
dataRegularSecondary.forEach(value => {
returnData.push({
name: value.name,
data: [{
y: value.y,
total: value.total_ada,
next: 'level_2',
drilldown: true,
}],
});
});
Or you can use map as well.
const returnData = dataRegularSecondary.map(value => ({
name: value.name,
data: [{
y: value.y,
total: value.total_ada,
next: 'level_2',
drilldown: true,
}],
}));

loop from nested object javascript

I have a javascript object which has the nested array called interaction, now what I wanted to do is a loop from each object of the main array and fetch the values from the interaction array, I'm a kind of a newbie with iteration and looping. here below is the object
var data = [{
'id':'1',
'boothid':[{'id':'1','name':'yyy'}],
'interaction':[{
'userid':'1',
'username':'user1',
},{
'userid':'2',
'username':'user2',
}]
},
{
'id':'2',
'boothid':[{'id':'2','name':'xxx'}],
'interaction':[{
'userid':'4',
'username':'user4',
},
{
'userid':'5',
'username':'user5',
},
{
'userid':'6',
'username':'user6',
}],
'resource':'2',
},
{
'id':'3',
'boothid':[{'id':'2','name':'zzz'}],
'interaction':[{
'userid':'4',
'username':'user4',
}],
'resource':'3',
}]
console.log(data);
expected output
yyy
{
"userid": "1",
"username": "user1"
}
{
"userid": "2",
"username": "user2"
}
xxx
{
"userid": "4",
"username": "user4"
}
{
"userid": "5",
"username": "user5"
}
{
"userid": "6",
"username": "user6"
}
zzz
{
"userid": "4",
"username": "user4"
}
here what I'm trying to achieve is, I want to loop from the data object and show that in the frontend, so basically the output will be in 3 tables with respected booth names ex: table1= xxx, table2=yyy, table3=zzz, and the users in a particular booth will be displayed at td of theirs table.
You can use a .map. I made some assumptions:
At the time of writing the expected output has non-unique properties in single objects in the "itarations" array. Maybe you intended to have that object split into separate objects, each with its own "username" property.
"itarations" is a non-existent word. Maybe you meant "interactions".
In the example, the boothid array has always one entry. I'll assume this is always the case.
The code:
let data = [{id:'1',boothid:[{id:'1',name:'yyy'}],interaction:[{userid:'1',username:'user1',},{userid:'2',username:'user2',}]},{id:'2',boothid:[{id:'2',name:'xxx'}],interaction:[{userid:'4',username:'user4',},{userid:'5',username:'user5',},{userid:'6',username:'user6',}],resource:'2',},{id:'3',boothid:[{id:'2',name:'zzz'}],interaction:[{userid:'4',username:'user4',}],resource:'3',}];
let result = data.map(o => ({
boothname: o.boothid[0].name,
interactions: o.interaction.map(({username}) => ({ username }))
}));
console.log(result);
I suggest you to use the map function.
var data = [
{
'id':'1',
'boothid':[{'id':'1','name':'yyy'}],
'interaction':[
{'userid':'1', 'username':'user1'},
{'userid':'2', 'username':'user2'}
]
},
{
'id':'2',
'boothid':[{'id':'2','name':'xxx'}],
'interaction':[
{'userid':'4', 'username':'user4'},
{'userid':'5', 'username':'user5'},
{'userid':'6', 'username':'user6'}
]
}
];
var result = data.map(({boothid, interaction}) => ({
boothname: boothid[0].name,
interaction
}));
console.log(result);
You can try this.
var data = [
{
'id':'1',
'boothid':[{'id':'1','name':'yyy'}],
'interaction':[{
'userid':'1',
'username':'user1',
},{
'userid':'2',
'username':'user2',
}]
},
{
'id':'2',
'boothid':[{'id':'2','name':'xxx'}],
'interaction':[{
'userid':'4',
'username':'user4',
},
{
'userid':'5',
'username':'user5',
},
{
'userid':'6',
'username':'user6',
}],
'resource':'2',
},
{
'id':'3',
'boothid':[{'id':'2','name':'zzz'}],
'interaction':[{
'userid':'4',
'username':'user4',
}],
'resource':'3',
}];
var result = data.map(({boothid, interaction}) => ({
boothname: boothid[0].name,
interaction: interaction.map(({username}) => username)
}));
console.log(result);
friends thank you for your response and ideas, as andy mentioned link the above comment helped me to get the required answer. here below is my answer
var data = [{
'id':'1',
'boothid':[{'id':'1','name':'yyy'}],
'interaction':[{
'userid':'1',
'username':'user1',
},{
'userid':'2',
'username':'user2',
}]
},
{
'id':'2',
'boothid':[{'id':'2','name':'xxx'}],
'interaction':[{
'userid':'4',
'username':'user4',
},
{
'userid':'5',
'username':'user5',
},
{
'userid':'6',
'username':'user6',
}],
'resource':'2',
},
{
'id':'3',
'boothid':[{'id':'2','name':'zzz'}],
'interaction':[{
'userid':'4',
'username':'user4',
}],
'resource':'3',
}]
for (let i of data){
console.log(i.boothid[0].name);
for(let j of i.interaction ){
console.log(j);
}
}
let interactions = [];
data.map(obj => {
interactions.push({
boothname: obj.boothid[0].name,
interactions: obj.interaction,
})
})
You can loop over "data" array with map it will give you each element on iteration where you can pick boothname from "obj.boothid" and interactions from "obj.interaction".

how to make nested array objects in javascript in a key value pair format

array data=[
{
"id":1,
"name":"john",
"income":22000,
"expenses":15000
},
{
"id":2,
"name":"kiran",
"income":27000,
"expenses":13000
},
{
"id":1,
"name":"john",
"income":35000,
"expenses":24000
}
]
i want to make a new array set in following format which is in a key value pair. ie result set.
can you please explain the best method. ? how to achive using foreach.?
tried using foreach method by looping each element. but cant get the desired output format
var result= [ {
"name": "john",
"series": [
{
"name": "income",
"value": 22000
},
{
"name": "expenses",
"value": 15000
},
]
},
{
"name": "kiran",
"series": [
{
"name": "income",
"value": 27000
},
{
"name": "expenses",
"value": 13000
},
]
}]
// Your array
const result = [
{
name: "john",
series: [
{
name: "income",
value: 22000,
},
{
name: "expenses",
value: 15000,
},
],
},
{
name: "kiran",
series: [
{
name: "income",
value: 27000,
},
{
name: "expenses",
value: 13000,
},
],
},
];
// What is .map function?
// https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/map
// Output
// map return a new function.
// it's a loop method but more equipped
result.map((item, index) => {
const seriesKeyValues = {};
// forEach is too, it's a loop method.
// but not have a return value,
// just loops and give you item on each loop
item.series.forEach(serie => {
//seriesKeyValues is a object.
// different between seriesKeyValues.serie.name
// it's a bracket notation
// look this documentation
// https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Object_initializer#computed_property_names
seriesKeyValues[serie.name] = serie.value;
});
// return new Object
// ... is 'spread syntax' basically combine objects
// https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Object_initializer#spread_properties
// spread syntax is a new way.
// old way is https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/assign
return {
id: index,
name: item.name,
...seriesKeyValues,
};
});
I hope it will help :). if you don't understand any lines of code, i can explain

Remove duplicate nested objects in array using Lodash

I have an array which looks like below
var nestedArray = [
{ id: 1, filter: { type: "nestedArray", name: "5" } },
{ id: 2, filter: { type: "nestedArray1", name: "6" } },
{ id: 3, filter: { type: "nestedArray", name: "5" } }
];
Now here I have a duplicate object, I just want to identify the duplicates using a Lodash method. Any help is appreciated.
Have already tried map, filter options but need something in Lodash method.
You can use reject with a Property.
var myArray = [
{
"id": 1,
"filter": {
"type": "nestedArray",
"name": "5"
}
},
{
"id": 2,
"filter": {
"type": "nestedArray1",
"name": "6"
}
},
{
"id": 3,
"filter": {
"type": "nestedArray",
"name": "5"
}
}
];
var result = _.reject(myArray, ['filter.name', '5']);
console.log(result);
<script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.11/lodash.min.js"></script>
So u want to reject duplicate ones by value in filter key?
_.uniqWith(nestedArray, (x, y) => _.isEqual(x.filter, y.filter), myArray)
If you have the flexibility to use Ramda instead, it could be more concise like because of every functions are auto-curried
const rejectDuplicateFilter = R.uniqWith(R.eqProps('filter'));
rejectDuplicateFilter(myArray)

Extracting an object from an array in Javascript

I am working on a D3.JS chart using an array named "dataset" where each entry is an object with a key and value attributes, such as the following:
dataset=
[
{"key":"alpha", "value": [ {}, { } ...]},
{"key":"beta", "value": [ { }, { } ...]},
{"key":"gamma", "value": [ {}, { } ...]},
{"key":"delta", "value": [ { }, { } ...]}
];
I need to extract one of those objects to create a new array. I have tried the following:
filteredDataset = dataset.filter(function(d){ console.log("d",d); if(d.key === "gamma") return d});
I can see in the console that I am accessing each object in the dataset, but the resulting filteredDataset comes out empty. What am I doing wrong?
For clarity filter should be used by returning a boolean:
Like:
filteredDataset = dataset.filter(function(d){ return d.key === "gamma"})
And on my end the code
var dataset = [
{"key":"alpha", "value": [ {}, { }]},
{"key":"beta", "value": [ { }, { }]},
{"key":"gamma", "value": [ {}, { }]},
{"key":"delta", "value": [ { }, { }]}
];
filteredDataset = dataset.filter(function(d){ return d.key === "gamma"})
Outputs:
[ { key: 'gamma', value: [ {}, {} ] } ]
So please double check your code
dataset.filter(function(d){return d.key === 'gamma';});
This returns the data where key === gamma.
https://github.com/mbostock/d3/wiki/Selections#filter

Categories

Resources