Mapping array in Vue JS

Question

I'm developing a small application in VueJS 2.0 where 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_count by comparing i.e. if interactions_count is 0 I want to map with client_interactions_count, I'm unable to get company name from the first array parameter, and order it with the count in descending order whatever it comes by response. Help me out in this. Thanks.

Answer 1

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);