How to fetch data from json using Reactjs - reactjs

Question

I know this is very basic. but i would appreciate if anyone can help me understanding on how to fetch data from json using React js.
I have just started to learn React so was just curious to know if there are any ways to fetch data from complex json using this.
I have tried to follow React Tutorial
I am trying to fetch data from 2nd level keys in a json. I was able to do that using Object.keys, but I am not sure what the issue is here when i am trying to apply it to my dataset. I am just unable to get anything when i try the commented dataset which is not that different from the other dataset. Can Object.keys be applied to datasets where there are more than one key? Can anyone please help?
Please check my fiddle
Here is my code
var SearchStock = React.createClass({
getInitialState: function() {
return {searchString: ''};
},
handleChange: function(e) {
this.setState({searchString: e.target.value});
},
render: function() {
var stocks = this.props.items, searchString = this.state.searchString.trim().toLowerCase();
if (searchString.length > 0) {
stocks = stocks.filter(function(l) {
// return l.name.toLowerCase().match(searchString);
return l[Object.keys(l)[0]]["name"].toLowerCase().match(searchString);
});
}
return <div >
< input type = "text" value = {this.state.searchString} onChange = {this.handleChange} placeholder = "Type here" / >
< ul >
{stocks.map(function(l) {
return <li > {l[Object.keys(l)[0]]["name"]} < /li>
// return <li > {l[Object.keys(l)[0]]["name"]} < /li>
})
}
< /ul>
< /div>;
}
});
// var stocks = [{"F": {"symbol": "F", "name": "Ford Motor", "bidPrice": 13.41, "askPrice": 13.36}}, {"GE": {"symbol": "GE", "name": "General Electric", "bidPrice": 32.33, "askPrice": 32.39}}, {"JNJ: {"symbol": "JNJ", "name": "Johnson \u0026 Johnson", "bidPrice": 121.0, "askPrice": 123.0,}}];
var stocks = [{"symbol": {"symbol": "F", "name": "Ford Motors"}, "name": "Ford Motor", "bidPrice": 13.41, "askPrice": 13.36}, {"symbol": {"symbol": "GE", "name": "General Electronics"}, "name": "General Electric", "bidPrice": 32.33, "askPrice": 32.39}, {"symbol": {"symbol": "JNJ", "name": "Johnson \u0026 Johnson"}, "name": "Johnson \u0026 Johnson", "bidPrice": 121.0, "askPrice": 123.0,}];
ReactDOM.render( < SearchStock items = {stocks} />,document.getElementById('container'));
My Aim is to build a simple single page app in which we can search data from json using the key.symbol, so i am adding another level to the data so that when i build my api i can just put it there using the symbol.
I would appreciate if anyone can help me out with this. Sorry for changing my question in the middle. And thanks for pointing me in the right direction.

Answer 1

implement that in the componentDidMount method of your Stock element.
Something like this:
var Stock = React.createClass({
...
render: function() {
...
},
componentDidMount: function() {
let url = 'myStockApi/' + this.props.symbol;
this.serverRequest = $.get(url, function(result) {
let quote = result;
this.setState({
quote
});
}.bind(this));
},
componentWillUnmount: function() {
this.serverRequest.abort();
},
});
Check out the documentation here.

Answer 2

I was able to find my answer from here . I have update my post. Please check the code in my post.