Как извлечь и отобразить данные из одного JSON объекта в плоский список - PullRequest
Новая
       3

Как извлечь и отобразить данные из одного JSON объекта в плоский список

0 голосов
/ 18 марта 2020

Я создаю запрос, который запрашивает клиента и его данные с сервера API. Ответ, который возвращается обратно: 

{
    "cust_id": 1,
    "given_name": "John",
    "family_name": "Smith",
    "email": "smith99@hotmail.com",
    "recent_purchases": [
        {
            "item_id": 1,
            "price": 20,
            "item_descr": "Small apple”
        },
        {
            "item_id ": 2,
            " price ": 15,
            "item_descr": "Sponge Cake”
        }
      }
    ]
}

Это моя функция get GET, которая получает ответ и сохраняет его в:

custDetails: [] состояние 

getCustDetails () {
      return fetch(‘API URL HERE’,  
         {
            method: 'GET',
            headers: {
               'Content-Type': 'application/json',
            },
         })
         .then((res) => res.json())
         .then((resJson) => {
            this.setState({
               custDetails: resJson,
            });
            console.log("The server response is :" + this.state.userDetail)
         })
         .catch((error) => {
            console.log(error);
         });
   }

Но когда я пытаюсь отобразить информацию о клиенте в плоском списке, ничего не появляется и не появляется ошибка. Сообщение журнала, которое появляется из функции getCust: «Ответ сервера: [объект объекта]»

Мой плоский список настроен: 

       <FlatList
           data={this.state.custDetails}
           keyExtractor={({ cust_id}) => cust_id}
           renderItem={({ cust}) => <View style={styles.list}>
              <Text style={styles.ListText}>{cust.cust_id }</Text>
              <Text style={styles.ListText}>{cust.given_name}</Text>
              <Text style={styles.ListText}>{cust.family_name}</Text>
              <Text style={styles.ListText}>{cust.email}</Text>
           </View>}
        />

Что я делаю не так?

Спасибо

1 Ответ

0 голосов
/ 18 марта 2020

Кажется, вы пытаетесь перебрать простой объект. Если ответ сервера 

{
    "cust_id": 1,
    "given_name": "John",
    "family_name": "Smith",
    "email": "smith99@hotmail.com",
    "recent_purchases": [
        {
            "item_id": 1,
            "price": 20,
            "item_descr": "Small apple”
        },
        {
            "item_id ": 2,
            " price ": 15,
            "item_descr": "Sponge Cake”
        }
      }
    ]
}

, ваш setState должен быть 

this.setState({
    custDetails: [resJson],
});

Вы поддерживаете журналы [object Object], потому что вы должны использовать JSON.stringify. 

console.log("The server response is :" + JSON.stringify(this.state.userDetail))
...