从特定的JSON键值对创建一个数组

Question

假设我有一个这样的JSON数组：

[{"name":"Lenovo Thinkpad 41A4298","website":"google"},
{"name":"Lenovo Thinkpad 41A2222","website":"google"},
{"name":"Lenovo Thinkpad 41Awww33","website":"yahoo"},
{"name":"Lenovo Thinkpad 41A424448","website":"google"},
{"name":"Lenovo Thinkpad 41A429rr8","website":"ebay"},
{"name":"Lenovo Thinkpad 41A429ff8","website":"ebay"},
{"name":"Lenovo Thinkpad 41A429ss8","website":"rediff"},
{"name":"Lenovo Thinkpad 41A429sg8","website":"yahoo"}]

我希望获得一个数组，其中包含所有具有website值等于google的name。

首先，为了过滤JSON数组，只包含website为google的条目，我有以下代码：

var data_filter = data.filter( element => element.website =="google");
console.log(data_filter);

这将产生以下结果：

[{"name":"Lenovo Thinkpad 41A4298","website":"google"},
    {"name":"Lenovo Thinkpad 41A2222","website":"google"},
    {"name":"Lenovo Thinkpad 41A424448","website":"google"}]

我需要在下一步中如何将name分离成一个单独的数组。我尝试了以下方法：

let new_array = [];
  new_array.push(data_filter.body.name)

这让我遇到了一个关于name的未定义错误。我也尝试了以下代码：

new_array.push(data_filter.name)
  new_array.push(data_filter.body[0].name)

但是这些方法都不起作用。我在这里缺少了什么？

附注：JSON数据和过滤器方法在这个SO帖子中提到：post - 感谢原作者和回答者。

- demouser123

---

我有一个 JSON。你手头上有 JSON 数据还是对象？它们是非常不同的东西。 - CertainPerformance

你的过滤器行不通。你正在为每个 element.website 分配一个真值，因此所有项目都将通过过滤测试。 - CertainPerformance

你期望 data_filter.body 是什么？你刚刚将 data_filter 记录为一个数组。 - Bergi

Answer 1

在比较时，您需要使用双等号==而不是单个等号=。当使用单个等号时，您将会更改（分配）element.website为"google"。该表达式的结果是您设置的值，即"google"，它是一个真值，因此所有元素都通过了filter()的测试。

var data = [{"name":"Lenovo Thinkpad 41A4298","website":"google"},
{"name":"Lenovo Thinkpad 41A2222","website":"google"},
{"name":"Lenovo Thinkpad 41Awww33","website":"yahoo"},
{"name":"Lenovo Thinkpad 41A424448","website":"google"},
{"name":"Lenovo Thinkpad 41A429rr8","website":"ebay"},
{"name":"Lenovo Thinkpad 41A429ff8","website":"ebay"},
{"name":"Lenovo Thinkpad 41A429ss8","website":"rediff"},
{"name":"Lenovo Thinkpad 41A429sg8","website":"yahoo"}];

var data_filter = data.filter( element => element.website == "google");

var names = data_filter.map(function (elem) {
  return elem.name;
});
console.log(names);

要在筛选结果后获取名称，请使用 map()。

您的代码无法正常工作，因为您尝试访问已过滤结果的属性 body。过滤后的结果由原始结果数组组成，但仅包含通过测试的条目。由于原始条目没有 body 属性，因此过滤后的结果也不会有该属性。此外，您尝试使用 data_filter.body，但这永远不存在，因为 data_filter 将始终是一个数组，而数组没有 body 属性。

了解有关 filter() 的更多信息，请单击此处。

- dodov

---

感谢提供筛选方法的链接。我还在这里找到了另一个有用的链接：https://medium.com/@joomiguelcunha/learn-map-filter-and-reduce-in-javascript-ea59009593c4 - demouser123

Answer 2

在filter之后使用map（同时使用===来替换=）

var data_filter = data.filter( element => element.website === "google").map( s => s.name );

或者如果您不想迭代两次，请使用reduce

data.reduce( (a, c) => {
   c.website === "google" ? a.push( c.name ) : "";
   return a; //return accumulator
} , []); //initialize accumulator

- gurvinder372

Answer 3

您可以使用map方法与filter结合使用，并为它们中的每一个传递提供的回调函数。

let data = [{"name":"Lenovo Thinkpad 41A4298","website":"google"}, {"name":"Lenovo Thinkpad 41A2222","website":"google"}, {"name":"Lenovo Thinkpad 41Awww33","website":"yahoo"}, {"name":"Lenovo Thinkpad 41A424448","website":"google"}, {"name":"Lenovo Thinkpad 41A429rr8","website":"ebay"}, {"name":"Lenovo Thinkpad 41A429ff8","website":"ebay"}, {"name":"Lenovo Thinkpad 41A429ss8","website":"rediff"}, {"name":"Lenovo Thinkpad 41A429sg8","website":"yahoo"}]

names = data.filter(function(item){
     return item.website == 'google';
}).map(function(item){
     return item.name;
});
console.log(names)

另一种方法是使用 箭头函数 并进行解构参数。

let data = [{"name":"Lenovo Thinkpad 41A4298","website":"google"}, {"name":"Lenovo Thinkpad 41A2222","website":"google"}, {"name":"Lenovo Thinkpad 41Awww33","website":"yahoo"}, {"name":"Lenovo Thinkpad 41A424448","website":"google"}, {"name":"Lenovo Thinkpad 41A429rr8","website":"ebay"}, {"name":"Lenovo Thinkpad 41A429ff8","website":"ebay"}, {"name":"Lenovo Thinkpad 41A429ss8","website":"rediff"}, {"name":"Lenovo Thinkpad 41A429sg8","website":"yahoo"}]

names = data.filter(({website}) => website == 'google').map(({name}) => name);
console.log(names)

- Mihai Alexandru-Ionut

---

感谢这两种方法。它们都返回相同的结果。但是它们有什么区别呢？ - demouser123

@demouser123，在第二个中我使用了箭头函数，这是 ES6 的特性。 - Mihai Alexandru-Ionut

@demouser123，别忘了接受并回答问题，以帮助其他人。 - Mihai Alexandru-Ionut

我不明白为什么您在这里使用了解构。您是否认为它比只使用“data.filter(d => d.website == 'google').map(d => d.name)”更容易阅读？ - JollyJoker

Answer 4

使用reduce根据条件将元素推送到另一个数组中：

const data = [{"name":"Lenovo Thinkpad 41A4298","website":"google"},
{"name":"Lenovo Thinkpad 41A2222","website":"google"},
{"name":"Lenovo Thinkpad 41Awww33","website":"yahoo"},
{"name":"Lenovo Thinkpad 41A424448","website":"google"},
{"name":"Lenovo Thinkpad 41A429rr8","website":"ebay"},
{"name":"Lenovo Thinkpad 41A429ff8","website":"ebay"},
{"name":"Lenovo Thinkpad 41A429ss8","website":"rediff"},
{"name":"Lenovo Thinkpad 41A429sg8","website":"yahoo"}];
const nameArr = data.reduce((nameArr, { name, website }) => {
  if (website === 'google') nameArr.push(name);
  return nameArr;
}, []);
console.log(nameArr);

- CertainPerformance

Answer 5

您可以简单地遍历对象数组，如果item.website === 'google'，则将item.name推入数组中。请参见以下的工作方案...

let theJSON = [
  {"name":"Lenovo Thinkpad 41A4298","website":"google"},
  {"name":"Lenovo Thinkpad 41A2222","website":"google"},
  {"name":"Lenovo Thinkpad 41Awww33","website":"yahoo"},
  {"name":"Lenovo Thinkpad 41A424448","website":"google"},
  {"name":"Lenovo Thinkpad 41A429rr8","website":"ebay"},
  {"name":"Lenovo Thinkpad 41A429ff8","website":"ebay"},
  {"name":"Lenovo Thinkpad 41A429ss8","website":"rediff"},
  {"name":"Lenovo Thinkpad 41A429sg8","website":"yahoo"}
]

let nameArray = []

theJSON.map((item) => {
  if (item.website === 'google') {
    nameArray.push(item.name)
  }
})

console.log(nameArray)

- Michael Daniels