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

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

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

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

Это мой JSON:

{"-M1ytAolVL1xdnO0dXjD": {"Favourite": false, "ItemIdentity": "Qjwj", "ItemName": "Sjsj", "ItemQuantity": "1"}, "-M1ytGOJD62TwwEWOmMu": {"Favourite": true, "ItemIdentity": "This is my thing", "ItemName": "Acer laptop", "ItemQuantity": "12"}}

Это мой код плоского списка : 

    render() {
        console.log(this.state.retrieveData.id)
        return (
            <View>
                <Text>A</Text>   
                    <FlatList data={this.state.retrieveData}
                        renderItem={({ item }) => (
                            <ListItem title={item.Favourite} />
                        )}
                    >
                        <Text>B</Text>
                    </FlatList>
            </View>
        )
    }```

Ответы [ 3 ]

1 голос
/ 10 марта 2020

Для самого первого вы можете проанализировать необработанную JSON строку: 

const rawData = JSON.parse('{"-M1ytAolVL1xdnO0dXjD": {"Favourite": false, "ItemIdentity": "Qjwj", "ItemName": "Sjsj", "ItemQuantity": "1"}, "-M1ytGOJD62TwwEWOmMu": {"Favourite": true, "ItemIdentity": "This is my thing", "ItemName": "Acer laptop", "ItemQuantity": "12"}}')

, а затем преобразовать в массив значений: 

const data = Object.values(rawData);
/*
// will produce 
  [
{"Favourite": false, "ItemIdentity": "Qjwj", "ItemName": "Sjsj", "ItemQuantity": "1"}, 
{"Favourite": true, "ItemIdentity": "This is my thing", "ItemName": "Acer laptop", "ItemQuantity": "12"}
]
*/

Важно : Вы не должен делать это внутри render(). Не стесняйтесь перемещать такое преобразование близко к извлечению.

А затем используйте данные в рендере: 

render() {
        console.log(this.state.data)
        return (
            <View>
                <Text>Data</Text>   
                    <FlatList data={this.state.data}
                        renderItem={({ item }) => (
                            <ListItem title={item.Favourite} />
                        )}
                    />
            </View>
        )
    }
1 голос
/ 10 марта 2020

вам нужно проанализировать json с помощью JSON .parse (), чтобы использовать его для плоского списка, также компонент Flatlist принимает только массивы, а не объекты. Если вы хотите сохранить ключи объектов, возвращаемые firebase, попробуйте сначала отформатировать ваши данные.

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

Вы можете сделать что-то вроде этого - 

constructor(props){
    super(props);
    this.state = {retrieveData: []};
}

componentDidMount() {
    // fetch your json here
    const json = {"-M1ytAolVL1xdnO0dXjD": {"Favourite": false, "ItemIdentity": "Qjwj", "ItemName": "Sjsj", "ItemQuantity": "1"}, "-M1ytGOJD62TwwEWOmMu": {"Favourite": true, "ItemIdentity": "This is my thing", "ItemName": "Acer laptop", "ItemQuantity": "12"}};
    const list = [];
    for(const k in json) {
      list.push({
        id: k,
        ...json[k],
      })
    }
    this.setState({retrieveData: list});
}

Тогда 

render() {
        return (
            <View>
                <Text>A</Text>   
                    <FlatList data={this.state.retrieveData}
                        renderItem={({ item }) => (
                            <ListItem title={item.Favourite} />
                        )}
                    >
                        <Text>B</Text>
                    </FlatList>
            </View>
        )
    }
...