How to read items in a JSON Array in react js using filter?

Question

I have the following json. From the below json I wanted only the PartNumber of each item in the form of an array. Can anyone please help how to do so using filter?

Below is my code. In the console log am getting only the PartNumber of first item

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

Tholle · Accepted Answer · 2019-02-18 10:40:48Z

filter will create a new array with all the elements that returned a truthy value from the function. You want to use map instead and just pluck out the PartNumber property.

Example

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);

Afzal Hossain · Accepted Answer · 2019-02-18 10:20:45Z

0

This is not a filter operation. Just use map instead of filter. (replace filter with map)

answered Feb 18, 2019 at 10:20

Afzal Hossain

3,3381 gold badge23 silver badges13 bronze badges

Comments

Sultan H. · Accepted Answer · 2019-02-18 10:34:38Z

0

Array.filter() is used to create a new array with the element/s that satisfy the condition giving in the callback function on the filter(() => condition) method.

You may use reduce as follows:

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

In this case, productsNumbers[] would have what's like: `productsNumbers = []

answered Feb 18, 2019 at 10:34

Sultan H.

2,9383 gold badges14 silver badges23 bronze badges

Collectives™ on Stack Overflow

How to read items in a JSON Array in react js using filter?

3 Answers 3

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related