Как получить значения массива в данных JSON в реагировать родной? - PullRequest
Новая
       12

Как получить значения массива в данных JSON в реагировать родной?

0 голосов
/ 08 февраля 2019

Здравствуйте, я пытаюсь обработать ответ выборки с сервера, как показано ниже: 

.then(responseData => {
                responseData.map(detail => {

                    let currIndex = -1;
                    let k = detail.data.curriculum.reduce((acc, curr) => {

                        if (curr.type === 'section') {
                            acc.push({
                                title: curr.title,
                                content: [],
                                id: []
                            })
                            currIndex += 1
                        } else {
                            acc[currIndex].content.push(curr.title);
                            acc[currIndex].id.push(curr.id);
                        }

                        return acc;
                    }, []);
                    console.log(k)
                    this.setState({ k })
                });
            });

Я пытаюсь отобразить пользовательский интерфейс, подобный этому

enter image description here

Но то, что я получаю, это название видео контента будет перечисляться один за другим в виде списка, подобного этому

enter image description here

Соответствующий код, который я пробовал до сих пор, приведен ниже

код 

 <Content padder style={{ backgroundColor: "#f4f4f4" }}>

                        {this.state.k.map(detail =>

                            <View style={st.card}>
                                <View style={st.cardHeading}>
                                    <Text style={st.headingText}>{detail.title}</Text>
                                </View>

                                <ScrollView
                                    horizontal
                                    style={st.cardBody}>

                                    <View style={st.videoContent}>
                                        <View style={st.videoImage}>
                                            <MaterialCommunityIcons name="play-circle-outline" size={25} color="#fff" />
                                        </View>
                                        <Text style={st.subheadingText}>{detail.content}</Text>
                                    </View>

                                </ScrollView>

                            </View>
                        )}
</Content

>

Данные json в этом.state.k выглядит следующим образом. Я пытаюсь отобразить заголовок как headingText и содержимое как videoContent. Пожалуйста, помогите мне найти решение.enter image description here

1 Ответ

0 голосов
/ 08 февраля 2019

Похоже, что вам не хватает на самом деле перебрать содержимое или массивы идентификаторов внутри элемента ScrollView.Исходя из вашей текущей структуры данных, я бы предложил сделать что-то вроде этого. 

<ScrollView
  horizontal
  style={st.cardBody}
>
  {detail.content.map((contentValue, i) => (
    <View style={st.videoContent}>
      <View style={st.videoImage}>
        <MaterialCommunityIcons
          name="play-circle-outline"
          size={25}
          color="#fff"
        />
      </View>

      <Text style={st.subheadingText}>
        Title: { contentValue }
        Id: { detail.id[i] }
      </Text>
    </View>
  ))}
</ScrollView>

Обратите внимание, что я добавил значение из массива id внутри элемента Text, чтобы проиллюстрировать, как получить к нему доступ, но также и для того, чтобы показать, что структура данных делает это довольно громоздким, поэтому может быть лучше улучшить эту структуру, возможно вот так 

.then(responseData => {
  responseData.map(detail => {
    let currIndex = -1;
    const k = detail.data.curriculum.reduce((acc, curr) => {

      if (curr.type === 'section') {
        acc.push({
            title: curr.title,
            content: []
        })
        currIndex += 1

      } else {
        acc[currIndex].content.push(curr);
      }

      return acc;
    }, []);

    this.setState({ k })
  });
});

Таким образом, вам не нужно отслеживать индексмассив при отображении и может просто использовать его как это 

  {detail.content.map((curr) => (
    ...
      <Text style={st.subheadingText}>
        Title: { curr.title }
        Id: { curr.id }
      </Text>
    ...
  ))}
...