How to populate React array from JSON Nodejs back end

Question

I'm very new to React. I've set up a Nodejs back end which reads a JSON file in the following format:

{
    "cert1" : {
        "name" : "www.google.com",
        "state" : "valid",
        "days" : "482"
    },
    "cert2" : {
        "name" : "www.facebook.com",
        "state" : "valid",
        "days" : "182"
    },
    .
    .
    .
}

I want to display this data in a table and first need to put it into an array. I've managed to display www.google.com using the following code.

class App extends Component {
  state = {
    name  : '',
    state : '',
    days  : '',
    response : ''
  };


  componentDidMount() {
    this.callApi()
      .then(res => {
        this.setState({ 
          response: res.cert1.name
        })
      })
      .catch(err => console.log(err));
  }


  callApi = async () => {
    const response = await fetch('/list-certs');
    const body = await response.json();

    if (response.status !== 200) throw Error(body.message);

    return body;
  };

  render() {
    return (
      <div className="App">
        <div className="App-header">
          <img src={logo} className="App-logo" alt="logo" />
          <h2>Welcome to React</h2>
        </div>
        <p className="App-intro">
          {this.state.response}
        </p>
      </div>
    );
  }
}

How do I map over the whole JSON file and populate some arrays with all the entries? Right now I'm calling res.cert1.name but each cert entry in the JSON file has a different name (cert1, cert2, cert3 etc.) so how do I convert res.cert1.name into a generic call for any cert entry in the JSON file?

possible duplicate stackoverflow.com/questions/38742334/…

Hadi
– Hadi

2018-04-09 09:04:20 +00:00
Commented Apr 9, 2018 at 9:04 — Hadi
– Hadi, Commented Apr 9, 2018 at 9:04

UncleDave · Accepted Answer · 2018-04-09 09:07:33Z

1

Ideally you'd want your JSON to be an array, rather than an object of objects:

[
    {
        "name" : "www.google.com",
        "state" : "valid",
        "days" : "482"
    }, {
        "name" : "www.facebook.com",
        "state" : "valid",
        "days" : "182"
    }
]

Then on the frontend you can grab each cert's name with res.map(x => x.name)

answered Apr 9, 2018 at 9:07

UncleDave

7,2492 gold badges29 silver badges45 bronze badges

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

Comments

Daryl · Accepted Answer · 2018-04-09 09:07:57Z

0

Ideally you want the json results to be an array.

on retrieval from the api you can set the state with the results.

it depends what your api looks like, however if you return your json object with an array of items in it and store it in the state....

componentDidMount() {
    this.callApi()
      .then(res => {
        this.setState({ 
          results: res.body
        })
      })
      .catch(err => console.log(err));
  }

You can then do a map function in your render.

render() {
    return (
      <div className="App">
        <div className="App-header">
          <img src={logo} className="App-logo" alt="logo" />
          <h2>Welcome to React</h2>
        </div>
        <p className="App-intro">
          { this.state.results.map((row) => {
               return <p>{row.name}</p>
          }) }
        </p>
      </div>
    );
  }

Hope this helps.

answered Apr 9, 2018 at 9:07

Daryl

1955 bronze badges

3 Comments

tnoel999888 Over a year ago

thanks for the help, but I'm getting at error in the browser saying: App.js:44 Uncaught TypeError: this.state.response.map is not a function at App.render (App.js:44) at ReactCompositeComponent.js:793 at measureLifeCyclePerf (ReactCompositeComponent.js:74)

tnoel999888 Over a year ago

I've changed the response variable to an array and now there's no error but nothing's being displayed

Daryl Over a year ago

Hi @tnoel999888 it could be because the state results is not an array to begin with... in set state use this.setState({results:[]}); Also ensure the response from the server is coming back as an array not an object.

Chirag Ravindra · Accepted Answer · 2018-04-09 09:28:01Z

0

You can use Object.keys and Array.map to build an array out of your JSON object and map over that to render your elements.

Sample:

class App extends Component {
    state = {
        name  : '',
        state : '',
        days  : '',
        response : []
    };


    componentDidMount() {
        this.callApi()
            .then(res => {
                this.setState({
                    response: Object.keys(res).map(key=>({...res[key], id:key}))
                })
            })
            .catch(err => console.log(err));
    }


    callApi = async () => {
        const response = await fetch('/list-certs');
        const body = await response.json();

        if (response.status !== 200) throw Error(body.message);

        return body;
    };

    render() {
        return (
            <div className="App">
                <div className="App-header">
                    <img src={logo} className="App-logo" alt="logo" />
                    <h2>Welcome to React</h2>
                </div>
                <p className="App-intro">
                    {this.state.response.map(item => (<p>{item.name}</p>))}
                </p>
            </div>
        );
    }
}

edited Apr 9, 2018 at 9:28

answered Apr 9, 2018 at 9:07

Chirag Ravindra

4,8301 gold badge27 silver badges38 bronze badges

4 Comments

tnoel999888 Over a year ago

thanks for the help but I was getting an error in the browser saying map was not a function

Chirag Ravindra Over a year ago

Sorry, response was initialized as a string. Edited answer. The error was at this line, right? {this.state.response.map(item => (<p>{item.name}</p>))}

tnoel999888 Over a year ago

I think so yeh, I've changed my JSON file to an array format as suggested above and have changed my response variable to an empty list

Chirag Ravindra Over a year ago

If your JSON is an array now, you can skip the Object.keys().... bit in your componentDidMount method

Collectives™ on Stack Overflow

How to populate React array from JSON Nodejs back end

3 Answers 3

Comments

3 Comments

4 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

3 Comments

4 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related