'Unable to retrieve value from json object using map in react

I am trying to get values from a json object which fetched from an API. I tried with map function but I get the following error

nseop.jsx:29 Uncaught (in promise) TypeError: Cannot read properties of undefined (reading 'strikePrice') something wrong with nseop.jsx file

Please see attached code :

app.js

function App() {
  const [getdata,setData]=useState([]);
  const [expiry,expiryData]=useState([]);
  const [expiryDate,expiryDates]=useState([]);
  const [q,setQ]=useState("");
   const fetchData= ()=>{
    fetch('https://www.nseindia.com/api/option-chain-indices?symbol=BANKNIFTY',{
      method:"GET",
     headers:{
    "Host": "www1.nseindia.com",
    "Referer": "https://www.nseindia.com/option-chain",
    "X-Requested-With": "XMLHttpRequest",
    "User-Agent": "Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/80.0.3987.132 Safari/537.36",
    "Accept": "*/*",
    "Accept-Encoding": "gzip, deflate, br",
    "Accept-Language": "en-GB,en-US;q=0.9,en;q=0.8",
    "Cache-Control": "no-cache",
    "Connection": "keep-alive",
  
    }
  
      })
      .then((response)=>response.json())
          .then((json)=>{
            expiryDates(json.records.expiryDate);
            expiryData(json.records.index)
            setData(json.records.data);
            //expiryDate(json.records);
          }
       );
  
      //console.log("main"+JSON.stringify(expiryDate));
      console.log(""+(expiry.last));
   }
    
  useEffect(()=>{
    fetchData()
    const interval=setInterval(()=>{
      fetchData()
     },100000)
       
     return()=>clearInterval(interval)
    
  },[])

  //let mydata =data.map((myList) => console.log(<li>{mydata}</li> ) );  
  //var exip=data['records']['expiryDates'][0]
  //console.log(exip)

  return (
    <div className="App">
      
  l
      <DataTable getdata={getdata} expiry={expiry}/>
      
      </div>
  );
}

export default App;

nseop.jsx

    const DataGri = ({getdata,expiry,expiryDate}) => {
    
    const columns = [
        { field: 'id', headerName: 'id' },
        { field: 'strike', headerName: 'STRIKE' },
        //////////////////////////////////////
        { field: 'COI', headerName: 'OPEN INTEREST CE',minWidth: 150  },
        { field: 'ClastPrice', headerName: 'PRICE CE',minWidth: 150}, 
        { field: 'KCHANGEOI', headerName: 'CHANGE PE',minWidth: 150  },
        
        /////////////////
       ,
        { field: 'POI', headerName: 'OPEN INTEREST PE',minWidth: 150  },
        { field: 'PlastPrice', headerName: 'PRICE PE',minWidth: 150  },
        { field: 'CCHANGEOI', headerName: 'CHANGE CE',minWidth: 150  },
        { field: 'Pexpiry', headerName: 'expiry' },
               
    ]
    console.log(JSON.stringify(getdata,null,4))
    let myData =getdata.map((data,idx)=>{

return data.PE.strikePrice /********* THIS LING GIVING ERROR*****///////
  
})

       console.log(myData)

return (
   
    <div style={{ height: 700, width: '100%'}}>
      
      {/* <DataGrid 
        //rows={rows.filter(ma=>ma.strike>LowerRange && ma.strike<UpperRange  ) }
        rows={

        }
        columns={columns}
        pageSize={40}
          
      />
      <select>
          */}
           
    </div>
  )
}
export default DataGri

And this is the JSON stringify result in console:

 [
    {
        "strikePrice": 25500,
        "expiryDate": "30-Jun-2022",
        "PE": {
            "strikePrice": 25500,
            "expiryDate": "30-Jun-2022",
            "underlying": "BANKNIFTY",
            "identifier": "OPTIDXBANKNIFTY30-06-2022PE25500.00",
            "openInterest": 10,
            "changeinOpenInterest": 0,
            "pchangeinOpenInterest": 0,
            "totalTradedVolume": 0,
            "impliedVolatility": 0,
            "lastPrice": 28,
            "change": 0,
            "pChange": 0,
            "totalBuyQuantity": 2200,
            "totalSellQuantity": 0,
            "bidQty": 50,
            "bidprice": 10,
            "askQty": 0,
            "askPrice": 0,
            "underlyingValue": 37632.8
        },
        "CE": {
            "strikePrice": 25500,
            "expiryDate": "30-Jun-2022",
            "underlying": "BANKNIFTY",
            "identifier": "OPTIDXBANKNIFTY30-06-2022CE25500.00",
            "openInterest": 0,
            "changeinOpenInterest": 0,
            "pchangeinOpenInterest": 0,
            "totalTradedVolume": 0,
            "impliedVolatility": 0,
            "lastPrice": 0,
            "change": 0,
            "pChange": 0,
            "totalBuyQuantity": 1675,
            "totalSellQuantity": 1175,
            "bidQty": 500,
            "bidprice": 11691.3,
            "askQty": 1175,
            "askPrice": 13442.95,
            "underlyingValue": 37632.8
        }
    },
    {
        "strikePrice": 25500,
        "expiryDate": "29-Dec-2022",
        "PE": {
            "strikePrice": 25500,
            "expiryDate": "29-Dec-2022",
            "underlying": "BANKNIFTY",
            "identifier": "OPTIDXBANKNIFTY29-12-2022PE25500.00",
            "openInterest": 0,
            "changeinOpenInterest": 0,
            "pchangeinOpenInterest": 0,
            "totalTradedVolume": 0,
            "impliedVolatility": 0,
            "lastPrice": 0,
            "change": 0,
            "pChange": 0,
            "totalBuyQuantity": 1200,
            "totalSellQuantity": 0,
            "bidQty": 1200,
            "bidprice": 2.25,
            "askQty": 0,
            "askPrice": 0,
            "underlyingValue": 37632.8
        }
    },

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution	Source

'Unable to retrieve value from json object using map in react

Sources

Related Questions