ReactJS- can't read JSON array

Question

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

dfsq · Accepted Answer · 2017-02-23 13:34:39Z

1

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.

answered Feb 23, 2017 at 13:34

dfsq

193k26 gold badges244 silver badges261 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

kesavan Over a year ago

this.state.data.table.map doesn't work fine. ERROR in ./app/components/dataa.jsonYou may need an appropriate loader to handle this file type. SyntaxError: Unexpected token (2:9)

Collectives™ on Stack Overflow

ReactJS- can't read JSON array

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related