获取数组

Question

我发出一个AJAX请求，然后收到此消息（查看“网络”标签）

[
    {
        "request": "Amount of rainfall by day",
        "days": [
            {
                "day": 1,
                "amount": 50
            }, {
                "day": 2,
                "amount": 10
            }, {
                "day": 3,
                "amount": 10
            }, {
                "day": 4,
                "amount": 150
            }, {
                "day": 5,
                "amount": 130
            }, {
                "day": 6,
                "amount": 45
            }, {
                "day": 7,
                "amount": 10
            }
        ]
    }
]

我想创建一个值为'amount'的数组。

[50,10,10,150,130,45,10]

（顺序很重要;我会按照时间顺序在图表中显示这些值）

我尝试了lodash.values以及for..in，但嵌套数组和嵌套对象之间的混合相当混乱。

我想要一个优雅的解决方案。

问题1：我应该使用Json方法删除外部根级别数组吗？有什么方法可以摆脱它吗？

问题2：我应该使用哪种数据结构来保持天数和金额之间的关系？ （我的图表库Chart.js收到一个简单的单值数组。

Answer 1

使用Array#map根据请求的值创建一个新数组：

var data = [{"request":"Amount of rainfall by day","days":[{"day":1,"amount":50},{"day":2,"amount":10},{"day":3,"amount":10},{"day":4,"amount":150},{"day":5,"amount":130},{"day":6,"amount":45},{"day":7,"amount":10}]}];

var result = data[0].days.map(function(obj) {
  return obj.amount;
});

console.log(result);

问题1

您可以使用data[0]轻松转换它，在您映射/缩小后，您将获得一个新的数据结构。

问题2

您可以使用Array#reduce

来使用包含两个相关数组的简单对象

var data = [{"request":"Amount of rainfall by day","days":[{"day":1,"amount":50},{"day":2,"amount":10},{"day":3,"amount":10},{"day":4,"amount":150},{"day":5,"amount":130},{"day":6,"amount":45},{"day":7,"amount":10}]}];

var result = data[0].days.reduce(function(r, o) {
  r.days.push(o.day);
  r.amounts.push(o.amount);
  
  return r;
}, { days: [], amounts: [] });

console.log(JSON.stringify(result));

Answer 2

我使用Lodash来回答你的问题

var response = [
    {
        "request": "Amount of rainfall by day",
        "days": [
            {
                "day": 1,
                "amount": 50
            }, {
                "day": 2,
                "amount": 10
            }, {
                "day": 3,
                "amount": 10
            }, {
                "day": 4,
                "amount": 150
            }, {
                "day": 5,
                "amount": 130
            }, {
                "day": 6,
                "amount": 45
            }, {
                "day": 7,
                "amount": 10
            }
        ]
    }
]; 
// using _.map function 
_.map(response[0].days, 'amount');

Lodash

Answer 3

使用此：

var reply = [
    {
        "request": "Amount of rainfall by day",
        "days": [
            {
                "day": 1,
                "amount": 50
            }, {
                "day": 2,
                "amount": 10
            }, {
                "day": 3,
                "amount": 10
            }, {
                "day": 4,
                "amount": 150
            }, {
                "day": 5,
                "amount": 130
            }, {
                "day": 6,
                "amount": 45
            }, {
                "day": 7,
                "amount": 10
            }
        ]
    }
];

var amounts = reply[0].days.map((i) => { return i.amount });
console.log(amounts);

Answer 4

如果day属性值不遵循响应对象中元素的顺序，则可能需要将该值用作最终数组中的索引。这是一个ES6解决方案：

var response = [
    {
        "request": "Amount of rainfall by day",
        "days": [
            {
                "day": 1,
                "amount": 50
            }, {
                "day": 2,
                "amount": 10
            }, {
                "day": 3,
                "amount": 10
            }, {
                "day": 4,
                "amount": 150
            }, {
                "day": 5,
                "amount": 130
            }, {
                "day": 6,
                "amount": 45
            }, {
                "day": 7,
                "amount": 10
            }
        ]
    }
];

var arr = response[0].days.reduce( (arr, o) => (arr[o.day-1] = o.amount, arr), []);

console.log(arr);

如果缺少第4天的价值，这甚至会起作用。在这种情况下，输出数组（索引3）中相应索引处的值将为undefined。