如何使用过滤器在反应js中读取JSON数组中的项目？

Question

我有以下json。从下面的json我只想要数组形式的每个项目的PartNumber。任何人都可以使用过滤器帮助如何做到这一点？

以下是我的代码。在控制台日志中，我只得到第一项的PartNumber

    state = {
        data: MYResult.Products || [],
        partNumbers: []
    };

   componentDidMount(){
      const allPartNumbers = this.state.data.filter(partnumbers =>  
      this.state.data.PartNumber);
      console.log(allPartNumbers)
   }

"Products": [
            {
            "PartNumber": "ALM-GN001",
            "ProductName": "GNSS Filter-LNA Front-End Module",
            "productline": "GPS/GNSS Wireless Amplifiers",
            "AV_47_Frequency_GHz": "1.575",
            "AV_47_NF": ""
            },
            {
            "PartNumber": "ALM-GP001",
            "ProductName": "GPS Filter-LNA-Filter Front-End Module",
            "productline": "GPS/GNSS Wireless Amplifiers",
            "AV_47_Frequency_GHz":"1.565 - 1.606",
            "AV_47_NF": ""
            },
            { 
            "PartNumber": "ALM-GA001",
            "ProductName": "High-Gain, Low-Current LNA with Variable Current and Shutdown Function",
            "productline": "GPS/GNSS Wireless Amplifiers",
            "AV_47_Frequency_GHz": "1.606",
            "AV_47_NF": "0.97"
            },
            {
            "PartNumber": "ALM-GN002",
            "ProductName": "GNSS LNA-Filter Front-End Module with Optional Differential Outputs",
            "productline": "GPS/GNSS Wireless Amplifiers",
            "AV_47_Frequency_GHz": "1.565",
            "AV_47_NF": "0.97"
            }
        ]

Answer 1

filter将创建一个新数组，其中包含从函数返回truthy值的所有元素。你想使用map而只是拔掉PartNumber属性。

例

const products = [
  {
    PartNumber: "ALM-GN001",
    ProductName: "GNSS Filter-LNA Front-End Module",
    productline: "GPS/GNSS Wireless Amplifiers",
    AV_47_Frequency_GHz: "1.575",
    AV_47_NF: ""
  },
  {
    PartNumber: "ALM-GP001",
    ProductName: "GPS Filter-LNA-Filter Front-End Module",
    productline: "GPS/GNSS Wireless Amplifiers",
    AV_47_Frequency_GHz: "1.565 - 1.606",
    AV_47_NF: ""
  },
  {
    PartNumber: "ALM-GA001",
    ProductName:
      "High-Gain, Low-Current LNA with Variable Current and Shutdown Function",
    productline: "GPS/GNSS Wireless Amplifiers",
    AV_47_Frequency_GHz: "1.606",
    AV_47_NF: "0.97"
  },
  {
    PartNumber: "ALM-GN002",
    ProductName:
      "GNSS LNA-Filter Front-End Module with Optional Differential Outputs",
    productline: "GPS/GNSS Wireless Amplifiers",
    AV_47_Frequency_GHz: "1.565",
    AV_47_NF: "0.97"
  }
];

const result = products.map(product => product.PartNumber);

console.log(result);

Answer 2

这不是过滤操作。只需使用map而不是filter。 （用地图替换过滤器）

Answer 3

Array.filter()用于创建一个新元素，其元素/ s满足filter(() => condition)方法的回调函数中给出的条件。

您可以使用reduce如下：

const productsNumbers = products.reduce((accum, product) => {
  accum.push(product.PartNumber);
  return accum;
}, []);

在这种情况下，productsNumbers[]会有这样的结果：`productsNumbers = []