CODEWITHSUNDEEP
reactjs
Satch3000
Satch3000

Reputation: 49384

ReactJS Read Json from url real time

I am looking into ReactJS. I've created database and added a table with some simple data. Next I created a php file that will display the data in json format like this:

[{"ID":"1","Name":"name","Color":"green"}]

Next I've created a reactjs skeleton page and I'm trying to get it to read and display the json data but cannot find a simple example anywhere.

How can I get reactjs to read json from a url?

Upvotes: 0

Views: 2453

Answers (1)

shashi
shashi

Reputation: 4696

I created a fiddle which is a simple getting started and will give you an idea how to proceed.

Also, I think you will find this example from React Docs about loading data from ajax helpful. Code from there is as follows:

var UserGist = React.createClass({
  getInitialState: function() {
    return {
      username: '',
      lastGistUrl: ''
    };
  },

  componentDidMount: function() {
    $.get(this.props.source, function(result) {
      var lastGist = result[0];
      if (this.isMounted()) {
        this.setState({
          username: lastGist.owner.login,
          lastGistUrl: lastGist.html_url
        });
      }
    }.bind(this));
  },

  render: function() {
    return (
      <div>
        {this.state.username}'s last gist is
        <a href={this.state.lastGistUrl}>here</a>.
      </div>
    );
  }
});

React.render(
  <UserGist source="https://api.github.com/users/octocat/gists" />,
  mountNode
);

Upvotes: 1

Related Questions