Get access to array in JSON by ReactJS

Question

I use ReactJS to get data from a JSON file

<!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 {data:[]};
            },
            componentDidMount:function() {
                var a=this;
                $.getJSON(this.props.url, function(data) {
                    a.setState({data:data})
                });
            },
            render: function() {
                console.log(this.state);
                return (
                        <div>
                            <h1>Sample data block</h1>
                                <h3>{this.state.data.movies[0].title}</h3>
                        </div>
                );
            }
        });
        React.render(
                <DataBlock url="small_data.json"/>,
                document.getElementById('content')
        );
    </script>
</body>
</html>

And this is JSON file small_data.json

{
  "movies": [
    {
      "abridged_cast": [
        {
          "characters": [
            "Dominic Toretto"
          ],
          "id": "162652472",
          "name": "Vin Diesel"
        },
        {
          "characters": [
            "Brian O'Conner"
          ],
          "id": "162654234",
          "name": "Paul Walker"
        }
      ],
      "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
}

Neither title nor anything else is displayed. But when I try to display a non-array object in JSON file, like runtime, I just use {this.state.data.runtime}, it shows as expected, but how can I get access to movies array? I thought I use proper syntax to retrive the array. If it's not like this, what is the true one? How can I get data from objects in array in JSON and store in variables in ReactJS?

Samuli Hakoniemi · Accepted Answer · 2015-09-28 09:44:43Z

8

I think you're trying to achieve something like this, right: http://codepen.io/zvona/pen/BoQVoj?editors=001

return (
  <div>
    <h1>Sample data block</h1>
    {this.state.data.movies.map(function(movie, i) {
      return <h3 key={'movie-'+ i}>{movie.title}</h3>
    })}
  </div>
);

It loops through the movies array and .map() returns the value for each movie to be displayed.

edited Sep 28, 2015 at 9:44

answered Sep 28, 2015 at 9:17

Samuli Hakoniemi

19.1k1 gold badge64 silver badges79 bronze badges

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

9 Comments

zerkms Over a year ago

It worth mentioning that it's required to specify key

Samuli Hakoniemi Over a year ago

Thanks @zerkms , I'll add it to the example.

Samuli Hakoniemi Over a year ago

Sorry, it was missing return statement inside map. I'm used to write ES6 arrow syntax, which has return by default... :). Check the example link I provided on the post as well.

necroface Over a year ago

I don't know why it still works on codepen.io but doesn't work when I copy and paste it to my editor and reload

Samuli Hakoniemi Over a year ago

I updated the example. It uses some endpoint from chriscoyer's codepen example, don't care about that. XHR success callback sets your response JSON to the data state. And it works.

|

Collectives™ on Stack Overflow

Get access to array in JSON by ReactJS

1 Answer 1

9 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

9 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related