Как отфильтровать и отобразить повторяющиеся вложенные данные JSON в собственном ListView?

Question

Я новичок в JSON и фильтрации.Файл data.json и FolderScreen.js ниже отображают следующую структуру главы в react native ListView.При react-navigation реквизиты передаются для рендеринга связанных вложенных подразделов в ListView.

. Это работает безупречно для Chapter 1 и отрисовки Subchapter A, B и C в ListView…

Уровень 1> Глава 1

Подраздел A

Подраздел B B 1028*

Подраздел C

… но как только Subchapter A передается в FolderScreen.js все его Sub-Subchapters A1, A2 иA3 не отображаются должным образом в ListView с фрагментом ниже…

Уровень 2> Подраздел A

ПодразделA1

Подраздел A2

Подраздел A3

… что-то не хватает в фильтре JSON?

Или просто неправильно?

---

data.json

{
   "id":"chapter-1",
   "name":"Chapter 1",
   "type":"folder",
   "content":[
  {
     "id":"sub-chapter-a",
     "name":"Subchapter A",
     "type":"folder",
     "content":[
        {
           "id":"sub-sub-chapter-a1",
           "name":"Sub-Subchapter A1",
           "type":"file"
        },
        {
           "id":"sub-sub-chapter-a2",
           "name":"Sub-Subchapter A2",
           "type":"file"
        },
        {
           "id":"sub-sub-chapter-a3",
           "name":"Sub-Subchapter A3",
           "type":"file"
        }
     ]
  },
  {
     "id":"sub-chapter-b",
     "name":"Subchapter B",
     "type":"file"
  },
  {
     "id":"sub-chapter-c",
     "name":"Subchapter C",
     "type":"file"
  }
   ]
}

---

FolderScreen.js

renderRow = () => {

const entry = this.props.navigation.getParam('chapterID', '');

const listEntry = jsonData.map(all =>
    all.content.filter(parent => parent.id === entry).map(item =>
        item.content.map(i => {
            return (
                <ListEntry
                    id={i.id}
                    name={i.name}
                    type={i.type}
                    navigation={this.props.navigation}
                    key={i.id}
                />
            );
        })
    )
);

return listEntry;
};

---

Большое спасибо за помощь!

Answer 1

Ваша последняя карта возвращает массив только с одной записью. Вам нужно получить доступ к первому элементу массива [0] или изменить свой код, чтобы просмотреть результаты.

Вот упрощенная версия того, что работает:

const listEntry = jsonData.content
  .filter(sub => sub.id === entry)
  .map(subsub => subsub.content)[0]
  .map(item => { 
      return <ListEntry id={item.id} name={item.name}/> 
  }
);

Таким образом, вы должны изменить свой код для доступа к первому элементу массива перед использованием последнего .map:

const listEntry = jsonData.map(all =>
  all.content.filter(parent => parent.id === entry).map(item =>
    item.content)[0].map(i => {
        return (
            <ListEntry
                id={i.id}
                name={i.name}
                type={i.type}
                navigation={this.props.navigation}
                key={i.id}
            />
        );
    })
)
);

Вот рабочая закуска для моего примера кода: https://snack.expo.io/@navardan/nested-contents

Вот также хорошая статья о .map и .filter Упростите ваш JavaScript - используйте .map (), .reduce () и .filter ()

Answer 2

Это легко.Ваш код ожидает, что всегда будет свойство content, являющееся массивом (или, в любом случае, объектом, имеющим метод .map()).

На самом внутреннем уровне свойства "content": [] нет.

Либо добавьте его, либо просто добавьте регистрацию для свойства content, прежде чем пытаться его использовать.

Мой любимый метод - использовать (item.content || []).map(..., чтобы использовать пустой массивесли свойство имеет значение null или не определено.