如何使用过滤器在 React js 中读取 JSON 数组中的项目？答案

【问题标题】：How to read items in a JSON Array in react js using filter?如何使用过滤器在 React js 中读取 JSON 数组中的项目？
【发布时间】：2019-07-11 16:43:59
【问题描述】：

我有以下 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"
            }
        ]

【问题讨论】：

标签： json reactjs filter

【解决方案1】：

filter 将创建一个新数组，其中包含从函数返回真值的所有元素。您想改用 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);

【讨论】：

【解决方案2】：

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

【讨论】：

【解决方案3】：

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

你可以按如下方式使用reduce：

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

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

【讨论】：