javascript - Vue JS 中的映射数组

标签 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 以降序对其进行排序。帮我解决这个问题。谢谢。

最佳答案

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

关于javascript - Vue JS 中的映射数组,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/45689659/

相关文章:

javascript - 基于数字属性并将字符串移动到最后一个

javascript - 如何保持元素不刷新

javascript - 从另一个div点击设置div的全高和宽度

javascript - 有没有更好(更干净)的方法来使用三元运算符编写此 JS 代码(无需重复代码)?

javascript - 使用 ES6 在嵌套循环中返回父匹配

javascript - 商店更改后 React redux UI 未更新

vue.js - 在 vue.js 中获取来自 axios 的响应数据

javascript - 批量下载网页图片

javascript - 如何从 Vuejs 应用程序在社交媒体上分享?

vue.js - 在提交时获取表单数据?