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(stackoverflow.com/questions/16576457/…) what you're looking for? — user
– user, Commented Jul 13, 2016 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. 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
– Rajat Vij, Commented Jul 13, 2016 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. Maybe i am approaching this in a wrong way. I will be updating my post above too. — Rajat Vij
– Rajat Vij, Commented Jul 13, 2016 at 20:27

Michael · Accepted Answer · 2016-07-13 23:05:12Z

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, 2016 at 23:05

answered Jul 13, 2016 at 18:11

Michael

1,02818 silver badges25 bronze badges

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

1 Comment

Rajat Vij Over a year ago

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.

Community · Accepted Answer · 2017-05-23 12:30:52Z

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, 2017 at 12:30

CommunityBot

11 silver badge

answered Jul 14, 2016 at 19:05

Rajat Vij

6891 gold badge6 silver badges12 bronze badges

Collectives™ on Stack Overflow

How to fetch data from json using Reactjs

2 Answers 2

1 Comment

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related