ReactJS: How to render a JSON object with an array

Question

I'm trying to render an object with an array into an array (a JSON), that I receive from an API. I've tried a lot but I don't get with the solution.

This is the object format I receive:

{
    "catalogue": [
        [
            "shoes.txt",
            "trousers.txt",
            "tshirts.txt"
        ]
    ]
}

This is the code I'm using to call the API and render the object:

import React, { Component } from "react";
import axios from "axios";

class Result extends Component {
  constructor(props) {
    super(props);
    this.state = {
      items: [],
    };
  }

  componentDidMount() {
    const URL = "http://localhost/catalogue";
    fetch(URL)
      .then((response) => response.json())
      .then((data) => this.setState({ items: data }));
  }

  render() {
    const catalogue = this.state.items.catalogue;
    return <div>{catalogue}</div>;
  }
}

export default Result;

The only I could show in the web is this:

shoes.txttrousers.txttshirts.txt

The view I can get is something like this:

shoes.txt
trousers.txt
tshirts.txt

Would somebody help me please? Thanks in advance.

Sebastian Diaz · Accepted Answer · 2020-06-11 12:35:08Z

1

Try this:

import React, { Component } from "react";

class Result extends Component {
  constructor(props) {
    super(props);
    this.state = {
      items: [],
    };
  }

  componentDidMount() {
    const URL = "http://localhost/catalogue";
    fetch(URL)
      .then((response) => response.json())
      .then((data) => this.setState({ items: data.catalogue[0] }));
  }


  render() {
    let catalogue = this.state.items.map((item, key) => (
      <li key={key}>{item}</li>
    ));
    return <ul>{catalogue}</ul>;
  }
}

export default Result;

Pay attention to the "[0]" in this line:

.then((data) => this.setState({ items: data.catalogue[0] }));

edited Jun 11, 2020 at 12:35

Sebastian Diaz

1841 gold badge7 silver badges22 bronze badges

answered Jun 9, 2020 at 17:26

Piyush

3,3454 gold badges21 silver badges31 bronze badges

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

5 Comments

Sebastian Diaz Over a year ago

It works but it gives me the same output I get, with all the values together in the same line.

Piyush Over a year ago

Same line ? Its div which will show each item in new line. However, try this: render() { let catalogue = this.state.items.map(item => ( <li key={item}>{item}</li> ) return <ul>{catalogue}</ul>; } }

Sebastian Diaz Over a year ago

With that I get all in the same line but with a dot at the beginning. Maybe there is a problem with the object format?

Sebastian Diaz Over a year ago

Piyush: with the code you wrote here using <li> and <ul> tags and adding "[0]" into this.setState function (for the array into array), it works! I've edited the code you paste here to mark as working answer. Thanks!

Piyush Over a year ago

Oh yes, I missed it. The catalogue contains an array at its 0 index. Thanks 4 correcting.

Lim Jing Rong · Accepted Answer · 2020-06-09 17:02:25Z

0

I'm not 100% sure this is what you're looking for, but this should set you on the right track to achieving what you want eventually

Change

return <div>{catalogue}</div>;

to

return (
  <div>
    {catalogue.map(item => (
      <div key={item}>{item}</div>
    )}
  </div>
);

This will render your each entry in your array as a separate

edited Jun 9, 2020 at 17:02

answered Jun 9, 2020 at 16:54

Lim Jing Rong

4262 silver badges4 bronze badges

6 Comments

vinayak shahdeo Over a year ago

If you dont add key you get warning in console

Sebastian Diaz Over a year ago

I tried that but I get this: TypeError: Cannot read property 'map' of undefined

Lim Jing Rong Over a year ago

Did you include the line above the return statement inside your render body? i.e. const catalogue = this.state.items.catalogue;

Sebastian Diaz Over a year ago

Yes, I did, exactly like this:

render() {     const catalogue = this.state.items.catalogue;     return (       <div>         {catalogue.map((item) => (           <div key={item}>{item}</div>         ))}       </div>     );   }

Piyush Over a year ago

You will get TypeError, at first render. Initiallly, react is trying to get this.state.items.catalogue which is not there as items is empty array here. Thus, error app stuck here. I have added my answer you can try that.

|

vinayak shahdeo · Accepted Answer · 2020-06-10 12:00:19Z

0

Just change the render method to

class Result extends Component {
  constructor(props) {
    super(props);
    this.state = {
      items: [],
    };
  }

  componentDidMount() {
    const URL = "http://localhost/catalogue";
    fetch(URL)
      .then((response) => response.json())
      .then((data) => this.setState({ items: data.catalogue }));
  }


  render() {
return(
       <div>
      {this.state.items.catalogue.map((item, index) => (
        <span key={index}>{item}</span>
      ))}
    </div>
)}

edited Jun 10, 2020 at 12:00

answered Jun 9, 2020 at 16:55

vinayak shahdeo

1,5382 gold badges14 silver badges23 bronze badges

3 Comments

Sebastian Diaz Over a year ago

Same error that in previous answer: TypeError: Cannot read property 'map' of undefined

vinayak shahdeo Over a year ago

Edited my answer should work now. Also, use the hooks they are very powerful and easy.

Sebastian Diaz Over a year ago

It works but it gives me the same output I've got, with all the values together in the same line, as with other answers.

Collectives™ on Stack Overflow

ReactJS: How to render a JSON object with an array

3 Answers 3

5 Comments

6 Comments

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

5 Comments

6 Comments

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related