Как отображать данные из хеша в React Native?

Данные:

{
    “services”:[
        {id: 1, title: ”title 1”},
        {id:3, title:”title 3”},
        {id:4, title:”title 4”}
    ],

    “Blogs”:[
       {id:2 title:”title 2”},
       {id:5, title:”Services”}
    ]
}

Я хочу отобразить эти данные на экране как

services : 
            id: 1, title: ”title 1”
            id:3, title:”title 3”
            id:4, title:”title 4”

Blogs : 
          id:2 title:”title 2”
          id:5, title:”Services”

Я написал приведенный ниже код, но затем получил значение ключа, но не массив этого ключа.

{
    Object.keys(data).forEach(function(key) 
    {
        return (    
            <Text>{key}</Text>     
        )
    })
}

предложите любое решение, если кто-нибудь его знает. Заранее спасибо.

services.map((item, i) => {return ( <Text>{item}</Text> ) попробуйте вот так
pageNotfoUnd 16.08.2018 08:50
Структурированный массив Numpy
Структурированный массив Numpy
Однако в реальных проектах я чаще всего имею дело со списками, состоящими из нескольких типов данных. Как мы можем использовать массивы numpy, чтобы...
T - 1Bits: Генерация последовательного массива
T - 1Bits: Генерация последовательного массива
По мере того, как мы пишем все больше кода, мы привыкаем к определенным способам действий. То тут, то там мы находим код, который заставляет нас...
Что такое деструктуризация массива в JavaScript?
Что такое деструктуризация массива в JavaScript?
Деструктуризация позволяет распаковывать значения из массивов и добавлять их в отдельные переменные.
0
1
1 590
2
Перейти к ответу Данный вопрос помечен как решенный

Ответы 2

Используйте FlatList для итерации данных. Вам просто нужно передать объект Data в этот плоский список, и он автоматически создаст цикл. Дай мне знать, если тебе понадобится другая помощь.

Ответ принят как подходящий

Вы можете сделать это так:

{Object.entries(data).map(([key, value]) => (
  <View>
    <Text>{`${key} :`}</Text>
    <View style = {styles.shiftLeft}>
      { value.map(({ title, id}) => <Text key = {id}>{`id: ${id}, title: "${title}"`}</Text>)}
    </View>
  </View>
))}

Вот демонстрация на ЭКСПО.

Это выглядит так:

example picture rendering as asked

При необходимости styles.shiftLeft просто:

const styles = StyleSheet.create({
  shiftLeft: {
    marginLeft: 15,
  }
});

Другие вопросы по теме