How to fetch data from json using 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.

*I am unable to understand how to access second level key values without knowing the first one.* - is this(http://stackoverflow.com/questions/16576457/accessing-a-javascripts-object-property-without-knowing-that-property-name) what you're looking for? — user, Jul 13 '16 at 18:10
@Luksprog Is there any way i can ignore the first level key and directly check second level keys? Please check the [jsfiddle](https://jsfiddle.net/69z2wepo/48962/). Here i want to use data0. Now that i look at it. I dont really care about the value of first level key. Apologies for asking incorrect question before and thanks as i learned something new in javascript. NOTE: I know i can get this using data.forEach( function ( m ) method that's mentioned in the above link. But i am looking for something simpler like json.{}.key. Apologies, i usually use python and i know its possible there. — Rajat Vij, Jul 13 '16 at 19:16
@Luksprog I tried to use for in loop but it didnt work. I am not sure why as logic seems to be sound. Here's my [fiddle](https://jsfiddle.net/69z2wepo/48966/). Maybe i am approaching this in a wrong way. I will be updating my post above too. — Rajat Vij, Jul 13 '16 at 20:27

Michael · Accepted Answer · 2016-07-13T23:05:12.957

0

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.

edited Jul 13 '16 at 23:05

answered Jul 13 '16 at 18:11

Michael

1,028
18
25

Thanks a lot! This worked with dummy url data and would help me later. I will try to understand its details once i build my api. I have updated my post. For now i need to fetch nest data from json correctly and I would be grateful if you can answer my query. – Rajat Vij Jul 14 '16 at 01:48

score 0 · Answer 2 · edited May 23 '17 at 12:30

0

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

edited May 23 '17 at 12:30

Community

1
1

answered Jul 14 '16 at 19:05

Rajat Vij

689
1
6
12

How to fetch data from json using Reactjs

2 Answers2