Как отобразить этот ответ JSON в нативном React
Я разрабатываю учебный модуль в собственном приложении My React. Итак, у меня есть этот тип ответа JSON от firebase.
[
{
"description": "Desc How Should Companies Get Started in Data Science?",
"type": "section",
"title": "How Should Companies Get Started in Data Science?",
"section": "2",
"lesson": "3",
"categoryId": "621KeXergbNg690pECx6"
},
{
"lesson": "2",
"description": "Desc What is Hadoop?",
"title": "What is Hadoop?",
"section": "2",
"type": "section",
"categoryId": "A7IC1AliDVnvZECcU5oB"
},
{
"description": "Desc How Big Data is Driving Digital Transformation",
"lesson": "2",
"type": "section",
"title": "How Big Data is Driving Digital Transformation",
"section": "3",
"categoryId": "JNK9qIKIKW8gvXvWJ19w"
},
]
и мой дизайн:
Итак, как этого добиться. Заранее спасибо.
@crashmstr, этот ответ вставляется в firebase с помощью панели администратора. Так что я в замешательстве. Как печатать в текущем пользовательском интерфейсе.
Пользовательский интерфейс будет означать, что уроки имеют «высший» приоритет и у них есть «разделы».
Ответы 1
ответ должен быть лучше структурирован, но для ответа на ваш вопрос вы можете сформировать массив уроков, который включает разделы, используя эту логику
const groupByLesson = (arr) => {
const array = [];
return arr.reduce((memo, x) => {
const lessonIndex = memo.findIndex(
(obj) => obj?.lessonNumber == x.lesson
);
if (lessonIndex == -1) {
memo.push({ lessonNumber: x.lesson, sections: [x] });
} else {
const sortedSections = [...memo[lessonIndex].sections,x]
.sort((a, b) => a.section > b.section);
memo[lessonIndex].sections = sortedSections
}
return memo;
}, []);
}
const lessonsArray = groupByLesson(response).sort(
(a, b) => a.lessonNumber > b.lessonNumber
);
затем вы можете использовать этот массив внутри своей функции, сопоставив его с некоторыми компонентами пользовательского интерфейса, такими как этот (сделал несколько быстрых и грязных пользовательского интерфейса, чтобы показать вам пример)
const [showSections, setShowSections] = useState();
{lessonsArray.map((lesson) => (
<View
key = {lesson.lessonNumber}
style = {{ marginBottom: 20, borderWidth: 2, width: "100%" }}
>
<View
style = {{
flexDirection: "row",
justifyContent: "space-between",
}}
>
<Text>{"Lesson " + lesson.lessonNumber}</Text>
<Pressable
onPress = {() => {
setShowSections(lesson.lessonNumber);
}}
>
<Text style = {{ fontSize:20, marginRight:20}}>{">"}</Text>
</Pressable>
</View>
{showSections == lesson.lessonNumber &&
lesson.sections.map((section) => (
<>
<Text>{"Section " + section.section}</Text>
<Text>{section.title}</Text>
</>
))}
</View>
))}
@Roadsar, спасибо, но не могли бы вы привести полный пример. Так я могу лучше понять.
Я считаю, что это весь код, который вам нужен, остальное — просто настройка пользовательского интерфейса, пожалуйста, проголосуйте за ответ, если он вам помог.
@Roadsar, полный код
Я не знаю, как вы получаете массив ответов или какова структура вашего приложения, поэтому, к сожалению, я не могу предоставить вам полный код. В вашем приложении после того, как вы получите массив ответов, вам просто нужно передать его функции groupByLesson, а затем внутри вашего компонента вы можете добавить состояние showSections, а в своем возврате пользовательского интерфейса вы можете добавить последнюю часть, которая сопоставляет массив с Компоненты пользовательского интерфейса.
Как мы должны выяснить, что означают все эти случайно выглядящие данные и как они вписываются в ваш пользовательский интерфейс?