获取数组中嵌套对象的特定值

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

我想创建一个包含“金额”值的数组。

[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。