Как в reactjs получить json из вне?

Question

[Антон]

Всем доброго утра!
Подскажите, как получить json (к примеру вот отсюда jsonplaceholder.typicode.com/comments)
и вывести его?

Answer 1

[iBird Rose]

не знаю как в реакт, но на ангуляр 2 - так: plnkr.co/edit/oz71BFDAeeTwjwW5zqEY?p=preview
p.s. ну мало ли) может передумаешь)

Comments

[Антон]

Спасибо за ответ, но думаю реализация в реакте предпочтительней)

[iBird Rose]

Антон Хлебников: точно не хочешь?) https://www.youtube.com/watch?v=dUXKWoROquE

[Антон]

хочу, но проект на реакте, руки дойдут скоро)

[Николай]

Я просто мимо проходил, но зачем в subscribe setTimeout?

[iBird Rose]

Николай: да незачем. это я просто пилил недавно. нужно было делать preloader. ну и чтобы на него посмотреть - ставил settimeout.

[Николай]

iBird Rose: понятно, спасибо

Answer 2

[Антон]

Реализовал следующим образом
Скидываю готовое решение:

import React from 'react';
import $ from 'jquery';

class App extends React.Component {
   render() {
      return (
         <div>
            <Header/>
            <Content/>
         </div>
      );
   }
}

class Header extends React.Component {
   render() {
      return (
         <div>
            <h1>Title</h1>
         </div>
      );
   }
}

class Content extends React.Component {
    constructor() {
        super()
        this.state = {
            data: []
        }
    }
    componentDidMount() {
        $.ajax({
            url: "http://jsonplaceholder.typicode.com/users",
            type: "GET",
            dataType: 'json',
            ContentType: 'application/json',
            success: function (data) {

                this.setState({data: data});
            }.bind(this),
            error: function (jqXHR) {
                console.log(jqXHR);
            }.bind(this)
        })
    }
    render() {
        return (
            <table>
                <tbody>{this.state.data.map(function (item, key) {
                return (
                    <tr key={key}>
                        <td>{item.name}</td>
                        <td>{item.email}</td>
                    </tr>
                )
            })}</tbody>
            </table>
        )
    }
}


export default App;