How to bind data from getJSON to ReactJS state

Question

How to bind data from getJSON to ReactJS state

I am trying to get data from a JSON file and bind it to my page using ReactJS

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>Demo Fetch</title>
    <link rel="stylesheet" href="style.css" />
    <script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.13.3/react.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.13.3/JSXTransformer.js"></script>
    <script src="js/jquery-2.1.4.min.js"></script>
</head>
<body>
    <div id="content"></div>
    <script type="text/jsx">
        var DataBlock = React.createClass({
            getInitialState:function(){
                return {};
            },
            loadData:function() {
                var a=this;
                $.getJSON(this.props.url, function (obj) {
                    a.setState({data: obj})
                });
            },
            render: function() {
                return (
                        <div className="dataBlock" data={this.state.data}>
                            <h1>Sample data block</h1>
                                {this.loadData()}
                                <h3>{data.runtime}</h3>
                        </div>
                );
            }
        });
        React.render(
                <DataBlock url="small_data.json"/>,
                document.getElementById('content')
        );
    </script>
</body>
</html>

But nothing is displayed when I try to display the page. What happened to my code? Where is the mistake? Why can't I bind data from getJSONto the state of my React component?

This is my file small_data.json:

{
  "movies": [
    {
      "abridged_cast": [
        {
          "characters": [
            "Dominic Toretto"
          ],
          "id": "162652472",
          "name": "Vin Diesel"
        },
        {
          "characters": [
            "Brian O'Conner"
          ],
          "id": "162654234",
          "name": "Paul Walker"
        }
      ],
      "runtime": 140,
      "synopsis": "Continuing the global exploits in the unstoppable franchise built on speed, Vin Diesel, Paul Walker and Dwayne Johnson lead the returning cast of Fast & Furious 7. James Wan directs this chapter of the hugely successful series that also welcomes back favorites Michelle Rodriguez, Jordana Brewster, Tyrese Gibson, Chris \"Ludacris\" Bridges, Elsa Pataky and Lucas Black. They are joined by international action stars new to the franchise including Jason Statham, Djimon Hounsou, Tony Jaa, Ronda Rousey and Kurt Russell.",
      "title": "Furious 7",
      "year": 2015
    }
  ],
  "runtime": 140
}

+4

json ajax reactjs bind react-jsx

necroface Sep 28 '15 at 7:10

source share

1 answer

user3224271 · Accepted Answer · 2015-09-28T07:43:19+0000

you need to use componentDidMount: function() { to load data

import React from 'react';
import ReactDOM from 'react-dom';

const data = {
  "movies": [
    {
      "abridged_cast": [
        {
          "characters": [
            "Dominic Toretto"
          ],
          "id": "162652472",
          "name": "Vin Diesel"
        },
        {
          "characters": [
            "Brian O'Conner"
          ],
          "id": "162654234",
          "name": "Paul Walker"
        }
      ],
      "runtime": 140,
      "synopsis": "Continuing the global exploits in the unstoppable franchise built on speed, Vin Diesel, Paul Walker and Dwayne Johnson lead the returning cast of Fast & Furious 7. James Wan directs this chapter of the hugely successful series that also welcomes back favorites Michelle Rodriguez, Jordana Brewster, Tyrese Gibson, Chris \"Ludacris\" Bridges, Elsa Pataky and Lucas Black. They are joined by international action stars new to the franchise including Jason Statham, Djimon Hounsou, Tony Jaa, Ronda Rousey and Kurt Russell.",
      "title": "Furious 7",
      "year": 2015
    }
  ],
  "runtime": 140
}

const DataBlock = React.createClass({
    getInitialState: () => {
      return {
        data: null
      };
    },

    componentDidMount: () => {
                this.setState({
                    data: this.props.url
                });   
   },             
    render() {
        return <div>
        <h3>runtime: {data.runtime}</h3>
        <h4>the data:</h4> 
        {this.state.data}
        </div>;
    }
});


ReactDOM.render(<DataBlock url={data}/>, document.getElementById('.container'));

https://jsfiddle.net/63nL7yfj/

How to bind data from getJSON to ReactJS state

More articles: