Render array of objects React

Question

My local JSON file is as follows

[
   { "time": "2017", "Id": 1, "value": 40 },
   { "time": "2018", "Id": 1, "value": 65 },
   { "time": "1018", "Id": 1, "value": 34 }
]

I imported the JSON like:

import * as readings from '../data/readings';

And I want to render my data in a list in a React component.

This is what I have been tried:

import * as readings from '../data/readings';

class Table extends Component {

  render (){

        const data = Object.keys(readings).map((row, index) =>
                    <li key={index}> {row} </li>);
        return (
              <div>
                <ul>
                  {data}
                </ul>
              </div>
            );
  }
}

export default Table;

After rendering this component, I will see "default" on the screen but my aim is to have each object in one row like:

"time": "2017", "Id": 1, "value": 40
"time": "2018", "Id": 1, "value": 65
"time": "1018", "Id": 1, "value": 34

Can someone tell me what I am doing wrong? I've read a lot of related question but I could not relate.

Edit:

My data is an array itself but the import gives it like an object. That's why I use Object.keys and not readings.map

The data has already array format no need to use Object.keys — xargr
– xargr, Commented Mar 28, 2020 at 17:31

Daniel Bank · Accepted Answer · 2020-03-28 18:54:30Z

1

readings is itself an array so that is what you want to map over: readings.map(). The items in it are the objects you want to display, so there is where you want to use Object.keys(). Since you want to use the values as well, Object.entries() is slightly more readable.

Also, you are importing data from a JSON file so you should import the data as though it was a default export. You should explicitly specify the .json file type since it is not a .js file.

import readings from '../data/readings.json';

class Table extends Component {

  render() {
    const data = readings.map((reading, index) => {
      const readingData = Object.entries(reading).map((k, v) => <span>{k}: {v}</span>);
      return <li>{readingData}</li>;
    };

    return (
      <div>
        <ul>
          {data}
        </ul>
      </div>
    );
  }
}

export default Table;

edited Mar 28, 2020 at 18:54

answered Mar 28, 2020 at 17:45

Daniel Bank

3,9693 gold badges44 silver badges58 bronze badges

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

4 Comments

parastoo Over a year ago

Yes, readings itself is an array but it seems the import gives me an object. That's why I don't use readings.map

Daniel Bank Over a year ago

The fact that you are getting default as the rendered value suggests that you exported the JSON as a default export. i.e. export default [...JSON]. You are importing it as though it is a named export. So you would want to import it accordingly. I updated the import statement in my code.

parastoo Over a year ago

Thank you but the readings.json is the one that I posted there is no export default [...JSON]. It's a file with an array of objects. I didn't export it.

Daniel Bank Over a year ago

In the case that it's a JSON file, the above method should work for you: import readings from '../data/readings.json'. Worth noting that you should explicitly specify the file type since it is not a JS file.

Carlos Eustáquio · Accepted Answer · 2020-03-28 17:41:11Z

0

Your readings is not an object, it's an array! So, what you should do is to iterate over it, and for every inside object, do the process of Object.keys(readings).map()

import * as readings from '../data/readings';

class Table extends Component {

  render (){

        const data = readings.map((row, index) => 
          <li key={index}>
            {
             Object.keys(row).map(e =>   
            `${e[0]: e[1],} `
            }
          )
          </li>
        )

        return (
              <div>
                <ul>
                  {data}
                </ul>
              </div>
            );
  }
}

export default Table;

answered Mar 28, 2020 at 17:41

Carlos Eustáquio

1767 bronze badges

Comments

Sifat Haque · Accepted Answer · 2020-03-28 17:59:02Z

0

Your readings data is already an Array. You can directly use map on it.

import * as readings from '../data/readings';

class Table extends Component {

  render (){


      const readingsArray = Object.keys(readings).map(key => readings[key]);
      const data= readingsArray.map(obj => <li>{JSON.stringify(obj)}</li>);

        return (
              <div>
                <ul>
                  {data}
                </ul>
              </div>
            );
  }
}

export default Table;

edited Mar 28, 2020 at 17:59

answered Mar 28, 2020 at 17:35

Sifat Haque

6,1272 gold badges18 silver badges24 bronze badges

2 Comments

parastoo Over a year ago

I can't because of this error: Attempted import error: 'map' is not exported from '../data/readings' (imported as 'readings').

parastoo Over a year ago

It looks like the import gives me an object

Collectives™ on Stack Overflow

Render array of objects React

3 Answers 3

4 Comments

Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

4 Comments

Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related