@Ooos
Front-End

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

Всем доброго утра!
Подскажите, как получить json (к примеру вот отсюда jsonplaceholder.typicode.com/comments)
и вывести его?
  • Вопрос задан
  • 2080 просмотров
Решения вопроса 1
@id194695811
Можно примерно так

getInitialState: function() {
	return {
		data: []
	}
},
componentWillMount: function() {
	fetch('http://jsonplaceholder.typicode.com/comments')
		.then((res) => {
			res.json().then((data) => {
				this.setState({
					data: data
				})
			})
		})
		.catch((err) => {
			console.log(err)
		})
}
Ответ написан
Пригласить эксперта
Ответы на вопрос 2
iiiBird
@iiiBird
Пока ты спишь - твой конкурент совершенствуется
не знаю как в реакт, но на ангуляр 2 - так: plnkr.co/edit/oz71BFDAeeTwjwW5zqEY?p=preview
p.s. ну мало ли) может передумаешь)
Ответ написан
@Ooos Автор вопроса
Front-End
Реализовал следующим образом
Скидываю готовое решение:
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;
Ответ написан
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы