在Vue JS中映射数组

时间:2017-08-15 08:59:32

标签: javascript ecmascript-6 vue.js vuejs2

我正在VueJS 2.0开发一个小应用程序,我的数据集如下:

{"data":
    [
        {
            "id":8,
            "salutation":"Mr",
            "first_name":"Madhu",
            "last_name":"Kela",
            "number":"2343253455",
            "mobile":"3252345435",
            "email":"madhu@reliancemf.com",
            "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":"skbkjgerbra@dabflvdjf.com",
            "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"
                    }
                }
            ]
        }
    ]
}

我希望将这些值映射为:

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

另外正如您在代码中看到的那样,我希望通过比较来interactions_count,即如果interactions_count为0,我想用client_interactions_count进行映射,我无法从中获取公司名称第一个数组参数,无论响应是什么,都按count降序排序。帮助我解决这个问题。感谢。

1 个答案:

答案 0 :(得分:3)

const data = [
    {
        "id":8,
        "salutation":"Mr",
        "first_name":"Madhu",
        "last_name":"Kela",
        "number":"2343253455",
        "mobile":"3252345435",
        "email":"madhu@reliancemf.com",
        "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":"skbkjgerbra@dabflvdjf.com",
        "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);