CODEWITHSUNDEEP
javascriptjsonreactjs
Dean Beckerton
Dean Beckerton

Reputation: 307

ReactJS Json Object array

I am having an issue mapping some JSON:

https://environment.data.gov.uk/flood-monitoring/id/floodAreas/?county=Lincolnshire

Would really appreciate the help, thanks

I am using the following code to attempt to map the json object

await fetch('https://environment.data.gov.uk/flood-monitoring/id/floodAreas/?county=Lincolnshire')
  .then(res => res.json())
  .then(json => {
    this.setState({
      hasLoaded: true,
      weatherItems: json
    })
  });

static renderFloodTable(weatherItems) {
  return (
    <table class="centerTable" className='table table-striped' aria-labelledby="tabelLabel">
      <thead>
        <tr>    
          <th>County. (C)</th>           
        </tr>
      </thead>
      <tbody>
        {weatherItems.items.map(item =>
          <tr key={item.fwdCode}>                                          
            <td>{item.fwdCode}</td>
          </tr>
        )}
      </tbody>
    </table>
  );
}

Upvotes: 0

Views: 50

Answers (1)

ינון רחמים
ינון רחמים

Reputation: 706

i think the rendering in calling too soon so the weatherItems is'nt set yet. try this:

{weatherItems ? weatherItems.items.map( // ... etc... // ) : null}

and btw, you should not use await And .then toogether... choose one...

Upvotes: 1

Related Questions