How to render JSON list on browser in reactjs component?

Question

I am trying to take json list that I've received from API and want to render those json list on the browser. I figured out how to fetch data from REST API in the backend, now I want to take those json list and render it on the browser. Here is what I learned and what I tried:

import React from 'react';

export default class peopleList extends React.Component {
    state = {
        values: []
    }
    componentDidMount() {
       fetch('http://localhost:3005/people')
        .then(function(res) {
            return res.json();
        }).then(function(json) {
            this.setState({
               values: json
            })
        });
    }
    render(){
        return <div className="drop-down">
            <p>I would like to render json list on the browser </p>
              <select>{
                 this.state.values.map((obj) => {
                     return <option value={obj.id}>{obj.name}</option>
                 })
              }</select>
            </div>;
    }
}

Desired output:

I created a simple panel frame where I want to place json list data. for the simplicity I just want to display each line for the time being. How can I make this happen? can anyone point me out how to get this done more efficiently? Thanks

in this attached output, I used example panel frame that I want to put my json list on the panel. I admit that data that different though.

What exactly is your problem? Are you not able to get any output? And if so what errors are you receiving. — Steve K
– Steve K, Commented Apr 19, 2019 at 3:29
@SteveK above component didn't render json data on the browser, I don't get it why. Any idea? — beyond_inifinity
– beyond_inifinity, Commented Apr 19, 2019 at 3:34
@SteveK yeah, I ran the my component above and didn't render json list output on the browser. I don't know why. Any idea? — beyond_inifinity
– beyond_inifinity, Commented Apr 19, 2019 at 3:41
Yes I have some Ideas but just to be sure I want to know what errors you are receiving in your browser console. Do you know how to use the developer javascript console in your browser? It will give you any errors that happened. And if there are some what errors are you receiving. — Steve K
– Steve K, Commented Apr 19, 2019 at 3:44

Steve K · Accepted Answer · 2019-04-19 04:24:48Z

Without seeing exactly what is going on here and you not posting the actual code and json output that you are using all I can really do is guess as to what the problem is.

First the json output that you posted is different from the values that you are trying to get. There is no name or id value in the json output you posted.

Next in your componentDidMount() function it is best practice to use arrow function to bind to the class.

Next react components should have uppercase letters for the first letter of the components name so <peopleList/> would be taken as an html element and not a react component. If you are not receiving any errors in your console then this could be the issue.

And then you could possibly not be getting the correct json from your api or no json at all or its not logging to the state. Try logging the state to the console after your render and see if the json was posted to the values in your state. If it is then make sure that you are getting valid json markup and that your values are correct.

There are a few others that could be the issue but these are the main ones. I have put together an example for you to see at the following link Json Output Example CodeSandbox make sure you visit this example and compare to your code. In the left open the PeopleList Component.

For your use case I would set in your parent component the peoplelist as <PeopleList/> and then your component would look something like the following:

import React from "react";

export default class PeopleList extends React.Component {
  state = {
    values: []
  };
  componentDidMount() {
    fetch("http://localhost:3005/people")
      .then(res => res.json())
      .then(json => {
        this.setState({
          values: json
        });
      });
  }
  render() {
    return (
      <div className="drop-down">
        <p>I would like to render json list on the browser </p>
        <select>
          {this.state.values.map(obj => {
            return (
              <option key={obj.id} value={obj.id}>
                {obj.name}
              </option>
            );
          })}
        </select>
      </div>
    );
  }
}

Also if you are using the json output that you posted above you would use the following:

<option key={obj.uin} value={obj.uin}>
  {obj.studentInfo.FirstName}
</option>

If you have any other questions let me know.

reergymerej · Accepted Answer · 2019-04-19 04:21:09Z

1

In the example you posted, you're rendering a select with a bunch of options with undefined values. It doesn't seem to match your data or your question.

Using the data you provided, here is a rudimentary way to loop through the results and print them, looping through each prop in the objects as well.

https://jsfiddle.net/reergymerej/kmL84hvy/1/

If your real goal is just to print out the data in the component for quick debugging, you can do something like this.

render() {
  return (
    <div>{JSON.stringify(this.props)}</div>
  )
}

That's a cheap way to see what props your component is getting. Instead of that, you should familiarize yourself with React Dev Tools and learn to explore the components with greater flexibility. Barring that, good ole console.log debugging is a crutch we all use here and there.

If you'd like to get better and faster help, try and elaborate on your results. Add screen shots and try to explain what you see and how it differs from what you expect. More info is usually better than less for trouble shooting.

answered Apr 19, 2019 at 4:21

reergymerej

2,4172 gold badges27 silver badges32 bronze badges

2 Comments

beyond_inifinity Over a year ago

your answer's output is exactly what I want. Instead of explicitly using json list in the component, I want to use json list that fetched from API. How can I make that happen?

reergymerej Over a year ago

It's the same thing, just read it from this.state. My example just skips that part. I didn't see anything wrong with how you're fetching the data.

lscmaro · Accepted Answer · 2019-04-19 02:28:42Z

0

It doesn't look like that data holds what you're asking for (id and name). I'm a bit new with JSX but I think what you may be looking for is below in the form of a syntax update and property notation update.

return (
        <div className="drop-down">
        <p>I would like to render json list on the browser </p>
          <select>
           {this.state.values.map(obj => (
               <option value={obj.uin}>{obj.studentInfo.firstName}</option>
            ))}
          </select>
        </div>;
);

answered Apr 19, 2019 at 2:28

lscmaro

1,07510 silver badges23 bronze badges

1 Comment

beyond_inifinity Over a year ago

your solution is not helping. any other attempt?

Collectives™ on Stack Overflow

How to render JSON list on browser in reactjs component?

3 Answers 3

Comments

2 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

2 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related