Mapping array in Vue JS
30,319
const data = [
{
"id":8,
"salutation":"Mr",
"first_name":"Madhu",
"last_name":"Kela",
"number":"2343253455",
"mobile":"3252345435",
"email":"[email protected]",
"alt_email":null,
"address":"Mumbai BKC",
"city":"Mumbai",
"state":null,
"country":"India",
"profile":null,
"sectors_interested":"[\"Insurance\",\"Infrastructure\",\"Information Technology\",\"hevy machines\",\"Healtcare\"]",
"companies_interested":"[4]",
"interactions_count":11,
"client_interactions_count":0,
"company":[
{
"id":7,
"name":"Reliance MF",
"address":"Mumbai BKC",
"city":"Mumbai",
"state":null,
"country":"India",
"type":"Investor",
"sub_type":"Mutual Fund",
"is_client":0,
"pivot":{
"contact_id":8,
"company_id":7,
"created_at":"2017-07-01 17:07:08",
"updated_at":"2017-07-01 17:07:08"
}
}
]
},
{
"id":7,
"salutation":"Ms",
"first_name":"XYZ",
"last_name":"ABC",
"number":"1847171087",
"mobile":"8327523057",
"email":"[email protected]",
"alt_email":null,
"address":"Mumbai",
"city":"Mumbai",
"state":null,
"country":"India",
"profile":null,
"sectors_interested":"[\"Insurance\",\"Information Technology\",\"Infrastructure\",\"hevy machines\"]",
"companies_interested":"[6,4]",
"interactions_count":8,
"client_interactions_count":0,
"company":[
{
"id":3,
"name":"Franklin Fun",
"address":"Mumbai",
"city":"Mumbai",
"state":null,
"country":"India",
"type":"Investor",
"sub_type":"Mutual Fund",
"is_client":0,
"pivot":{
"contact_id":7,
"company_id":3,
"created_at":"2017-07-01 16:59:41",
"updated_at":"2017-07-01 16:59:41"
}
}
]
}
];
const result = data.map((item) => {
return {
name: item.first_name + ' ' + item.last_name,
company: item.company[0].name,
email: item.email,
mobile: item.mobile,
profile: item.profile,
count: item.interactions_count ? item.interactions_count : item.client_interactions_count
};
}).sort((a, b) => b.count - a.count);
console.log(result);
Author by
Nitish Kumar
Beginner to the code world. Curios to know lot more things
Updated on July 09, 2022Comments
-
Nitish Kumar almost 2 years
I'm developing a small application in
VueJS 2.0where I'm having a data set something like this:{"data": [ { "id":8, "salutation":"Mr", "first_name":"Madhu", "last_name":"Kela", "number":"2343253455", "mobile":"3252345435", "email":"[email protected]", "alt_email":null, "address":"Mumbai BKC", "city":"Mumbai", "state":null, "country":"India", "profile":null, "sectors_interested":"[\"Insurance\",\"Infrastructure\",\"Information Technology\",\"hevy machines\",\"Healtcare\"]", "companies_interested":"[4]", "interactions_count":11, "client_interactions_count":0, "company":[ { "id":7, "name":"Reliance MF", "address":"Mumbai BKC", "city":"Mumbai", "state":null, "country":"India", "type":"Investor", "sub_type":"Mutual Fund", "is_client":0, "pivot":{ "contact_id":8, "company_id":7, "created_at":"2017-07-01 17:07:08", "updated_at":"2017-07-01 17:07:08" } } ] }, { "id":7, "salutation":"Ms", "first_name":"XYZ", "last_name":"ABC", "number":"1847171087", "mobile":"8327523057", "email":"[email protected]", "alt_email":null, "address":"Mumbai", "city":"Mumbai", "state":null, "country":"India", "profile":null, "sectors_interested":"[\"Insurance\",\"Information Technology\",\"Infrastructure\",\"hevy machines\"]", "companies_interested":"[6,4]", "interactions_count":8, "client_interactions_count":0, "company":[ { "id":3, "name":"Franklin Fun", "address":"Mumbai", "city":"Mumbai", "state":null, "country":"India", "type":"Investor", "sub_type":"Mutual Fund", "is_client":0, "pivot":{ "contact_id":7, "company_id":3, "created_at":"2017-07-01 16:59:41", "updated_at":"2017-07-01 16:59:41" } } ] } ] }I want map these values something like this:
return this.model.map(d => ({ name: d.first_name + ' ' +d.last_name, company: d.company[0].name, email: d.email, mobile: d.mobile, profile: d.profile, count: d.interactions_count ? d.interactions_count : d.client_interactions_count }))Also as you see in the code I want to place
interactions_countby comparing i.e. ifinteractions_countis 0 I want to map withclient_interactions_count, I'm unable to get company name from the first array parameter, and order it with thecountin descending order whatever it comes by response. Help me out in this. Thanks.-
Jan Wirth almost 7 yearsPlease make sure the variable names in your code examples match. Also, have you tried to just dump
d? You will see if maybe the company name is undefined. -
euvl almost 7 yearsDont you have to dothis.modal.data, 'cause this object is in "model" variable, you still havedatathere. -
Nitish Kumar almost 7 years@FranzSkuffka yes it is.
-
Jan Wirth almost 7 yearsIf it is undefined, the problem is not within your map lambda.
-
Nitish Kumar almost 7 years@yev yes while placing it in model through response I'm doing something like this.
this.model = response.data.data -
Jan Wirth almost 7 yearsPlease give us more code. This is poking in the dark.
-
Nitish Kumar almost 7 years@FranzSkuffka it is not throwing
undefinedand what do you need? -
Jan Wirth almost 7 yearsIf you want us to debug your app we need the entire chain from HTTP request to your mapping function. You really should try to figure out the problem yourself using the chrome inspector (network tab, js debugger).
-
-
Nitish Kumar almost 7 yearsIs there any way to sort this with
countvalues in descending order?
