отобразить список из json api в React - PullRequest
Новая
       6

отобразить список из json api в React

0 голосов
/ 17 января 2019 

 how to display title, image and Variation_set price in react from this API

GET /api/products/?format=api
HTTP 200 OK
Allow: GET, HEAD, OPTIONS
Content-Type: application/json
Vary: Accept

{
    "count": 6,
    "next": "http://127.0.0.1:8000/api/products/?format=api&limit=1&offset=1",
    "previous": null,
    "results": [
        {
            "url": "http://127.0.0.1:8000/api/products/2/?format=api",
            "id": 2,
            "title": "iPhone Cover",
            "image": "/media/products/iphone-cover/iphone-cover-2_8x7c3td.jpg",
            "variation_set": [
                {
                    "id": 6,
                    "title": "Default",
                    "price": "29.99"
                }
            ]
        }
    ]
}GET /api/products/?format=api
HTTP 200 OK
Allow: GET, HEAD, OPTIONS
Content-Type: application/json
Vary: Accept

{
    "count": 6,
    "next": "http://127.0.0.1:8000/api/products/?format=api&limit=1&offset=1",
    "previous": null,
    "results": [
        {
            "url": "http://127.0.0.1:8000/api/products/2/?format=api",
            "id": 2,
            "title": "iPhone Cover",
            "image": "/media/products/iphone-cover/iphone-cover-2_8x7c3td.jpg",
            "variation_set": [
                {
                    "id": 6,
                    "title": "Default",
                    "price": "29.99"
                }
            ]
        }
    ]
}

как отображать заголовок, изображение и цену Variation_set в ответе от этого API

GET / api / products /? Format = api HTTP 200 OK Разрешить:GET, HEAD, OPTIONS Content-Type: application / json Зависит: Accept

{"count": 6, "next": "http://127.0.0.1:8000/api/products/?format=api&limit=1&offset=1"," previous ": null," results ": [{"url": "http://127.0.0.1:8000/api/products/2/?format=api"," id ": 2," title ":" Обложка iPhone "," image ":" /media/products/iphone-cover/iphone-cover-2_8x7c3td.jpg ","var_set": [{"id": 6, "title": "Default", "price": "29.99"}]}]} GET / api / products /? format = api HTTP 200 OK Разрешить: GET, HEAD, ОПЦИИ Тип содержимого: application / json Зависит: Принять

{"count": 6, "next": "http://127.0.0.1:8000/api/products/?format=api&limit=1&offset=1"," previous ": null," results ": [{" url":" http://127.0.0.1:8000/api/products/2/?format=api", "id": 2, "title": "iPhone Cover", "image": "/media/products/iphone-cover/iphone-cover-2_8x7c3td.jpg", "ification_set ": [{"id": 6, "title": "Default", "price": "29.99"}]}]}

Ответы [ 2 ]

0 голосов
/ 17 января 2019

Ну, ваш вопрос мне не совсем понятен, но если я прав, вы бы хотели отобразить некоторые данные, которые вы извлекли из API.

Как получить данные?

Есть несколько способов получить данные, например, используя встроенный метод fetch в JavaScript, или вы даже можете взглянуть на axios .

Мне нравятся оба из них, но я предпочитаю использовать встроенный. Это потому, что вам не нужно устанавливать его и связанные с ним зависимости.

Подробнее о fetch можно прочитать здесь .

После этого у вас будут все запрашиваемые данные где-то в переменной. Для отображения соответствующих полей вы можете выполнить итерацию вышеупомянутой переменной.

* ** 1023 тысяча двадцать-дв * Пример 
fetch('/api/products/?format=api')
   .then((res) => res.json())
   .then((data) => {
      for (let someKey in data.results) {
         // data.results, because that contains the fields you asked for
         ...
      }
   });

Я не знаю вашей точной структуры, но что-то похожее на вышесказанное должно решить вашу проблему. Было бы неплохо, если бы вы могли прикрепить несколько скриншотов.

0 голосов
/ 17 января 2019

Я бы импортировал Axios, тогда: 

getPrices() {
    axios.get('/api/products/?format=api', {
    headers:
        'Accept'        : 'application/json',
        'Content-Type'  : 'application/json;charset=UTF-8'

    }).then(res => {
        let values = res.results.variation_set.map((item) => {return {
            title   :   item.title
            price   :   item.price
        }});

        this.setState({prices : values})

    })
}

Как то так. И вы также должны включить изображения.

...