Showing JSON data in ReactJS

Question

I cant show the JSON response to the HTML, all I am getting is his.state.selectedData.map is not a function.

This is the payload

{
    "id": 1,
    "name":"john",
    "age" : 22
}

This is in the constructor

this.state = {
selectedData : [] 
}

This is the HTTP request:

axios.post("/api/data", data)
          .then(res =>{
             console.log(res)
             this.setState({
                selectedData : res.data
             })

          })

And this is how I am trying to show the result

 <div>
  <ul>
    { this.state.selectedData.map(data => {
      <li>{data.name}</li>
    })}
  </ul>
  </div>

what I am doing wrong ?

Does res.data look like the object in your first snippet? That is not an array, so trying to use map on that object will give rise to your error. Maybe you want to write this.setState({ selectedData: [res.data] });? — Tholle
– Tholle, Commented Aug 6, 2018 at 11:41
Yes, that is it looks like, with [res.data] it does not work either — TheTechGuy
– TheTechGuy, Commented Aug 6, 2018 at 11:42
Do you get the same error with [res.data]? Consider creating a Minimal, Complete, and Verifiable example in e.g. CodeSandbox and it will be easier to say what might be wrong. — Tholle
– Tholle, Commented Aug 6, 2018 at 11:44
with [res.data] i have TypeError: Cannot read property 'map' of undefined — TheTechGuy
– TheTechGuy, Commented Aug 6, 2018 at 11:56
That sounds very odd. Please create a working example and it will be easier to help you. — Tholle
– Tholle, Commented Aug 6, 2018 at 12:00

Sarath Kumar · Accepted Answer · 2018-08-06 11:58:22Z

2

Initially selectedData is array after the ajax you changing it to object. So map function is not going work.

class Test extends React.Component {
  constructor(props) {
     super(props)
     this.state = {
        selectedData :[]
     }
   }

readJson(json){
    let output=[]
    Object.keys(json).forEach(key=>{
        output.push(
            <li>{json[key]}</li>
        )
    });

    return output;
}

render() {
    return (
      <div>
        <ul>{this.readJson({ "id": 1,"name":"john","age" : 22 })}</ul>
      </div>
    )
  }
}

answered Aug 6, 2018 at 11:58

Sarath Kumar

1,1662 gold badges18 silver badges42 bronze badges

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

Comments

kumar k · Accepted Answer · 2018-08-06 12:05:51Z

1

The response from api is json object and your are trying to use map in json object will not work. Change selectedData to json object like below in the constructor

this.state = {
selectedData : {} 
}

And in the code you can directly refer the name key like below and remove the map.

this.state.selectedData.name && <li>{this.state.selectedData.name}</li>

answered Aug 6, 2018 at 12:05

kumar k

4762 silver badges9 bronze badges

1 Comment

TheTechGuy Over a year ago

Thanks , how would it be if the payload a json array was.?? palyload = [{ }] maybe then we can use map ?

A. Backhagen · Accepted Answer · 2018-08-06 12:37:41Z

0

You could try something like this if you want to keep your state object as an array.

let newData = this.state.selectedData;
axios.post("/api/data", data)
      .then(res =>{
         console.log(res)
         newData.push(res.data)
         this.setState({
            selectedData : newData
         })

      })

answered Aug 6, 2018 at 12:37

A. Backhagen

1,40512 silver badges19 bronze badges

2 Comments

A. Backhagen Over a year ago

One thing the raises my left eye brow is why this is a post request? You are getting data from your api? That sure sounds like a get request.

TheTechGuy Over a year ago

I am Posting data to a server and using server's response. Indeed a Post request in this context.

Khadim H. · Accepted Answer · 2020-02-17 12:15:26Z

0

constructor(props) {
super(props);
this.state = {
  loadedList: [],
  lists: [],
};
  }

componentDidMount() {
    axios.get('http://localhost:3001/../static/data/terrifdata.json')
      .then(response => {
       this.setState({
         lists: response.data,
         loadedList: response.data,
         isLoading: false
        })
    })
 }

<div>
{loadedList.map((postDetail, index) => {
                    return (
                  <h5>
                     {postDetail.name}
                  </h5>
                  )}
               }
</div>

answered Feb 17, 2020 at 12:15

Khadim H.

6836 silver badges8 bronze badges

Collectives™ on Stack Overflow

Showing JSON data in ReactJS

4 Answers 4

Comments

1 Comment

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

1 Comment

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related