Получение данных с API [как работать с массивом данных в реакте?]

Вопрос-ответ JavaScript
1

Добрый день, уважаемые!

Я недавно начал изучать JS и решил понять основы React создавая мини-приложения.
Столкнулся с проблемой получения данных по API

Как отсюда получить данные - понимаю

{"coord":{"lon":-0.13,"lat":51.51},"weather":[{"id":300,"main":"Drizzle","description":"light intensity drizzle","icon":"09d"}],"base":"stations","main":{"temp":280.32,"pressure":1012,"humidity":81,"temp_min":279.15,"temp_max":281.15},"visibility":10000,"wind":{"speed":4.1,"deg":80},"clouds":{"all":90},"dt":1485789600,"sys":{"type":1,"id":5091,"message":0.0103,"country":"GB","sunrise":1485762037,"sunset":1485794875},"id":2643743,"name":"London","cod":200}

this.setState({
    temp: data.main.temp,
    city: data.name,
    country: data.sys.country,
    pressure: data.main.pressure,
});

А вот с PrivatBank API такое не выходит.

[{"ccy":"USD","base_ccy":"UAH","buy":"26.70000","sale":"27.00000"},{"ccy":"EUR","base_ccy":"UAH","buy":"29.85000","sale":"30.45000"},{"ccy":"RUR","base_ccy":"UAH","buy":"0.38000","sale":"0.41500"},{"ccy":"BTC","base_ccy":"USD","buy":"4889.6341","sale":"5404.3325"}]

Посоветуйте пожалуйста литературу

2

А что именно хочешь отобразить из данных Приватбанка? Как мне кажется, вопрос в преобразовании структуры которую отдаёт апи в структуру удобную для отображения.

3

Идея следующая - при выборе валюты в выпадающем списке выводить актуальный курс:

<div>
{
      <div>
       <p>Соотношение: {props.base_ccy} / {props.ccy}</p>
       <p>Покупка: {props.buy}</p>
       <p>Продажа: {props.sale}</p>
      </div>
    }
    <p className="error">{ props.error }</p>
</div>

но проблема в том, что я не понимаю как мне присвоить номер строки к валюте

0: {ccy: "USD", base_ccy: "UAH", buy: "26.70000", sale: "27.00000"}
1: {ccy: "EUR", base_ccy: "UAH", buy: "29.85000", sale: "30.45000"}
2: {ccy: "RUR", base_ccy: "UAH", buy: "0.38000", sale: "0.41500"}
3: {ccy: "BTC", base_ccy: "USD", buy: "4916.4749", sale: "5433.9985"}
4

В твоей задачи 2 составляющих:

  1. Как сгенерировать список из которого выбирать валюту.
  2. Как связать выбор с отображением соответствующей валюты.

Полного ответа не дам, но дам направление. Удобнее хранить состояние о выбранной валюте и отображать узел в валютой в одном компоненте. Ниже метод render такого компонента. С помощью map можно сгенерировать разметку для выпадающего списка из массива данных. Чего нет в моем примере - так как связать выбор из списка с изменением state компонента. Обрати внимание что формы в реакте работают не так как в просто html/js: https://reactjs.org/docs/forms.html#controlled-components. В state складывай данные о валюте которая выбрана в выпадающем списке и соответственно отображай.

render() {
	const data = this.props.data
	return <div>
		<div>
			<select>
				{data.map((currencyItem) => {
					return <option>{currencyItem.ccy}</option>
				})}
			</select>
		</div>
		<div>
			<div>
				<p>Соотношение: {this.state.base_ccy} / {this.state.ccy}</p>
				<p>Покупка: {this.state.buy}</p>
				<p>Продажа: {this.state.sale}</p>
			</div>
		</div>
	</div>
}
1 лайк
5

Спасибо большое, буду разбираться!
Можешь посоветовать какие-то самоучители?

6

Если чуток разбираешься в программировании и английском, то смотри документацию реакта, там достаточно примеров. Попробуй их воспроизвести. После посмотри как другие используют реакт: todomvc http://todomvc.com/examples/react/

Если совсем новичок - то ищи indtroductory курс по реакту, и далее по списку что я писал выше.

В целом твоя стратегия отличная: решать мелкие задачки. И, конечно, спрашивай что непонятно: нюансов больше чем возможностей их понять из документации и примеров, поэтому нужен опыт тех кто уже разобрался в вопросе.

7

Приветствую. Подскажите, как разобрались с кодом для Привата? Поделитесь для опыта и понимания, если можно). Тихого дня!