CODEWITHSUNDEEP
jsonreactjs
kesavan
kesavan

Reputation: 343

ReactJS- can't read JSON array

My App.jsx file is below.

import React from 'react';
class App extends React.Component {
constructor() {
  super();

  this.state = {
     data:require('json!./dataa.json')

  }
}

render() {
  return (
    <body>
     <div>
        <Header/>
        <center>
        <table>
        <tr><th>NAME</th><th>VALUE</th><th>COLOR</th><th>Edit Table</th></tr>
           <tbody>
           {this.state.data.table.map(person, i) => <TableRow key = {i} data = {person} />)}
           </tbody></table></center>
     </div>
     </body>
  );
}
}

 class Header extends React.Component {
 render() {
  return (
     <div><center>
        <h1>Creation of table from JSON</h1></center>
     </div>
  );
  }
  }

   class TableRow extends React.Component {
   render() {
   return (
     <tr>
        <td>{this.props.data.NAME}</td>
        <td>{this.props.data.VALUE}</td>
        <td>{this.props.data.COLOR}</td>
         <td contentEditable='true'></td>
        </tr>
        );
         }
         }

export default App;

and my dataa.json file is like below

[{"table":
[{"NAME":"Alan","VALUE":12,"COLOR":"blue"},
{"NAME":"Shan","VALUE":13,"COLOR":"green"},
{"NAME":"John","VALUE":45,"COLOR":"orange"},
{"NAME":"Minna","VALUE":27,"COLOR":"teal"}]
}]

Question: It is compiled fine. but it display error in browser "cannot read the property of map undefined".How to resolve

Note: but it works fine when the json file like,

[{"NAME":"Alan","VALUE":12,"COLOR":"blue"},
{"NAME":"Shan","VALUE":13,"COLOR":"green"},
{"NAME":"John","VALUE":45,"COLOR":"orange"},
{"NAME":"Minna","VALUE":27,"COLOR":"teal"}]
}]

Upvotes: 0

Views: 1000

Answers (1)

dfsq
dfsq

Reputation: 193301

this.state.data doesn't have property table, because it is an array of single object.

Correct JSON structure to this

{
  "table": [
    {"NAME":"Alan","VALUE":12,"COLOR":"blue"},
    {"NAME":"Shan","VALUE":13,"COLOR":"green"},
    {"NAME":"John","VALUE":45,"COLOR":"orange"},
    {"NAME":"Minna","VALUE":27,"COLOR":"teal"}
  ]
}

and use this.state.data.table.map.

Upvotes: 1

Related Questions