I am trying to get the data from a .json file and displaying the results through a view. Below is the scoreboard.json file.

{
"subject":"scoreboard",
"copyright":"Copyright 2015",
"data":
   "games":{
     "next_day_date":"2015-07-22",
     "modified_date":"2015-08-04T07:34:50Z",
     "month":"07",
     "year":"2015",
     "game":[
        {
           "game_type":"R",
           "double_header_sw":"N",
           "location":"Some City, State",
        }, 
        {
           "game_type":"R",
           "double_header_sw":"N",
           "location":"Another City, Another State"
        }
     ]
   }

I only want the "data" field and not the "subject" or "copyright" fields and am able to do so through the ajax request below.

	getInitialState: function() {
		return {data: []};
	},
	ponentDidMount: function() {
		$.ajax({
		  url: this.props.url,
		  dataType: 'json',
		  cache: false,
		  success: function(data) {
		  	console.log(data.data);
		    this.setState({data: data.data});
		  }.bind(this),
		  error: function(xhr, status, err) {
		    console.error(this.props.url, status, err.toString());
		  }.bind(this)
		});
	},

I am trying to get the data from a .json file and displaying the results through a view. Below is the scoreboard.json file.

{
"subject":"scoreboard",
"copyright":"Copyright 2015",
"data":
   "games":{
     "next_day_date":"2015-07-22",
     "modified_date":"2015-08-04T07:34:50Z",
     "month":"07",
     "year":"2015",
     "game":[
        {
           "game_type":"R",
           "double_header_sw":"N",
           "location":"Some City, State",
        }, 
        {
           "game_type":"R",
           "double_header_sw":"N",
           "location":"Another City, Another State"
        }
     ]
   }

I only want the "data" field and not the "subject" or "copyright" fields and am able to do so through the ajax request below.

	getInitialState: function() {
		return {data: []};
	},
	ponentDidMount: function() {
		$.ajax({
		  url: this.props.url,
		  dataType: 'json',
		  cache: false,
		  success: function(data) {
		  	console.log(data.data);
		    this.setState({data: data.data});
		  }.bind(this),
		  error: function(xhr, status, err) {
		    console.error(this.props.url, status, err.toString());
		  }.bind(this)
		});
	},

I pass the state down to the receiving file but, when I try to call it I receive a TypeError: this.props.data.map is not a function

	render: function() {
		var gameDate = this.props.data.map(function(data) {
			return (
				<h1>{data.modified_date} </h1>
			);
		});

I want to be able to get all the information that is in the "data" field of the scoreboard.json eventually (i.e. data.games.game[] array). The .map function Does not seem to work for this either.

How would I get the "data" fields (more specifically the modified_date) in the .map function?

Edit: I can log the modified_date by calling data.games.modified_date but, when trying to set the state of data: this.state.data = data.games.game I receive a new warning: Each child in an array or iterator should have a unique "key" prop. Check the render method of "GameDate"

• javascript
• jquery
• json
• reactjs

• 2 data is not an array it's an object. data.games also is an object. If you just want the date you would say data.games.modified_date. There is no array to map over. – azium Commented Feb 15, 2016 at 22:06
• I think you should copy and paste more of your json file.. the one you posted has some syntax errors and doesn't show multiple games, like your question might suggest there to be. – azium Commented Feb 15, 2016 at 22:11
• Thanks azium, I have edited the json file to include another game. I figured out the games.modified_date just as you posted as well thanks! – Simon Commented Feb 15, 2016 at 22:16
• 1 I see.. so game is an array inside games. So you could do data.games.game.map(game => <div>{ game.game_type }</div>). Each game does not have its own modified date. – azium Commented Feb 15, 2016 at 22:22
• Thanks azium this works but, I receive this warning: Each child in an array or iterator should have a unique "key" prop. Check the render method of "GameDate" Edit: just added a "key" property to my views and this fixed the warning. – Simon Commented Feb 15, 2016 at 22:38

1 Answer 1

As pointed out by azium my data is an object and not an array like my results were expecting.

To get the "game" array inside the "games" field I set the state as the following:

this.setState({data: data.data.games.game});

To get the other fields I simply created a new state and passed it through a prop i.e. modified_date:

this.state.date = data.data.games.modified_date

The warning: Each child in an array or iterator should have a unique "key" prop. was fixed by adding a "key" property inside the .map method:

render: function() {
    var gameDate = this.props.data.map(function(data) {
        return (
            <h1 key={data.location} >{data.location} </h1>
        );
    });