patrikqvarnstrom patrikqvarnstrom - 3 months ago 68
JSON Question

How to map out nested JSON objects and arrays and display them in React

Edit: Initial question was a bit confusing so I rewrote the title and tried to clarify what I was trying to achieve.


My goal was to access a API get the JSON response, get specific values from different positions in the response, map out the response from objects and arrays and display them in a React component.


Question:

Im not sure how to access nested objects from my json response and pass them down to my components.

Right now im printing out {this.state.data.something} but it only works on the starting point not on the child objects.

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

var Item = React.createClass({
getInitialState:function() {
return {
data :[]
};
},

componentDidMount: function () {
$.ajax({
url: "jsonresource",
dataType: 'json'
}).done(function(response) {
this.setState({ data: response._nestedPath["something:product"]["0"]._nestedPath["something:product"].startingPoint });
}.bind(this));
},


// this is where I'am stuck
// so wrote some psuedo code

sortingFunction: function (data? // How Do I pass down this.state.data?? ) {

// My new var with only the stuff I need
var content = [];

$.each(data??, function(){
content.push({
title: this.title,
id: this.id,
nestedObjects: {
nested: this.nested
}
});
});
}

render: function() {
return <div>
<h1>{this.state.data.title}</h1> // This works fine but feels wrong?
<p>{this.state.data.id}</p> // This too
<p><b>Nested Object:</b> {this.state.data.nested.object} </p> // This doesn't work :(
</div>;
}
});

ReactDOM.render(
<Item />, document.getElementById('item')
);

Answer

Since nobody understod my question or what I was trying to achieve I had to figure it out myself. What I did was that I created different endpoints in the API and made separate arrays for each nested point I needed.

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


var item = React.createClass({
    getInitialState:function() {
        return {
          data :[],
          nestedObject: [],
          someArray: []
        };
},

componentDidMount: function () {
  $.ajax({
      url: "https://api.url.com",
      dataType: 'json'
  }).done(function(response) {

  var path = response._nestedPath["something:product"]["0"]._nestedPath["something:product"].start; 

  this.setState({ 
    data: path,
    nestedObject: path.nestedObject, // Javascript object with key values I need
    someArray: path.someArray

    });
   }.bind(this));
  },

render: function() { 

// Loop through array values I need

var someArray = [];

$.each(this.state.someArray, function() {
    someArray.push(<span>{this.title} </span>)
});

// Loop through contents of the nested object

var nestedObjects = [];

$.each(this.state.nestedObject , function (index, value){
  nestedObjects.push(value + ', '); 
});

return <div>
    <h1>{this.state.data.title}</h1>
    <h3>{someArray}</h3>
    <p>{nestedObjects}</p>


    </div>;
  }
});

ReactDOM.render(
    <Item />, document.getElementById('item')
);