如何从对象数组中过滤具有相同标题的数据？

Question

I have been trying to put up with the following behaviour for pending checks:

Instead I have been only able to do as follows:

My data looks like follow:

The code that I have written uptil now is as follows:

import React, {useState, useEffect} from 'react';
import {
  View,
  Text,
  ActivityIndicator,
  StyleSheet,
  SafeAreaView,
  TouchableOpacity,
  Image,
  FlatList,
} from 'react-native';
import axios from 'axios';
import {ROOT} from '../../services/ApiUrl';
import {vc} from '../../api';
import {timestamp} from '../../utils/dateUtils';
import {Images} from '../../assets/index';
export default function NutritionAssessment(props) {
  const {navigation} = props;
  const [index, setIndex] = useState(0);
  const [pendingIndex, setPendingIndex] = useState(null);
  const [questionsData, setQuestionsData] = useState({});
  const [idd, setIdd] = useState(null);
  const [optionid, setOptionId] = useState([]);
  const [group, setGroup] = useState(null);
  // console.log(props.route.params?.id);
  const id = props.route.params?.id;
  // console.log('id', id);
  // const getQuestions = async () => {
  //   const response = await API.get(
  //     `/wellchild/nutri-check?screen_type=116&child_id=${id}&vc=${vc}`,
  //   );
  //   console.log('nutrition response', response.data.content);
  //   setQuestionsData(response.data.content);
  //   setPendingIndex(questionsData.questions.length - 1);
  // };
  const getQuestions = () => {
    axios
      .get(
        `${ROOT}/wellchild/nutri-check?screen_type=116&child_id=${id}&vc=${vc}`,
      )
      .then(function (response) {
        console.log('nutrition response', response.data.content);
        setQuestionsData(response.data.content);
        setPendingIndex(response.data.content.questions.length - 1);
      })
      .catch(function (error) {
        console.log(error);
      });
  };
  useEffect(() => {
    getQuestions();
  }, []);

  const post = (item) => {
    console.log('ITEM', item);
    let chosen_option_id = optionid.concat(item.id);
    setOptionId(chosen_option_id);
    axios
      .post(`${ROOT}/wellchild/nutri-check/answer?screen_type=116&vc=55`, {
        answer_type: item.type,
        assessment_age: questionsData.assessment_age,
        child_id: id,
        chosen_option_id: optionid,
        event_date: timestamp,
        question_id: item.id,
        score: item.score,
      })
      .then(function (response) {
        console.log(response);
      })
      .catch(function (error) {
        console.log(error);
      });
  };
  const renderItem = ({item}) => {
   
    return (
      <View>
        <TouchableOpacity
          style={Styles.options}
          onPress={() => SelectOption(item)}>
          <Text style={Styles.optionText}>{item.name}</Text>
        </TouchableOpacity>
      </View>
    );
  };
  const SelectOption = (item) => {
    console.log('selected', item);
    console.log('set ID', idd);
    if (index === questionsData.questions.length - 1) {
      navigation.navigate('nutritionassessmentreport', {
        id: id,
        assessment_age: questionsData.assessment_age,
      });
    } else {
      setIndex(index + 1);
      setPendingIndex(pendingIndex - 1);
    }
    post(item);
    console.log('incremented index', index);
    console.log('decreased index', pendingIndex);
    // console.log('length',questionsData.questions.length)
  };

  return (
    <SafeAreaView
      style={{
        flex: 1,
        alignItems: 'center',
        padding: 16,
      }}>
      {questionsData &&
      questionsData != {} &&
      questionsData != null &&
      questionsData != '' &&
      questionsData != undefined
        ? questionsData.questions &&
          questionsData.questions != '' &&
          questionsData.questions != undefined &&
          questionsData.questions != null &&
          questionsData.questions.length > 0 && (
            <View style={{alignItems: 'center', height: '100%', padding: 10}}>
              <Text style={Styles.title}>
                {questionsData.questions[index].title}
              </Text>
              <Text style={Styles.text}>
                {questionsData.questions[index].text}
              </Text>
              <FlatList
                renderItem={renderItem}
                data={questionsData.questions[index].options}
              />

              {pendingIndex != null && pendingIndex != undefined && (
                <View style={{marginTop: 100, alignItems: 'center'}}>
                  <View style={{flexDirection: 'row'}}>
                    <Text style={Styles.pendingIndex}>{pendingIndex}</Text>
                    <Text style={{marginLeft: 7, fontSize: 12}}>
                      Pending Checks
                    </Text>
                  </View>
                  <Image
                    source={Images.pendingchecks}
                    style={{width: 60, height: 60, marginTop: 17}}
                  />
                </View>
              )}

              {console.log('decreased index.....', pendingIndex)}
            </View>
          )
        : null}
    </SafeAreaView>
  );
}
const Styles = StyleSheet.create({
  title: {
    fontWeight: 'bold',
    fontSize: 16,
    color: '#000',
  },
  text: {
    fontSize: 16,
    marginTop: 21,
    marginBottom: 30,
    fontWeight: '600',
  },
  options: {
    borderRadius: 40,
    height: 40,
    padding: 25,
    width: 300,
    alignItems: 'center',
    borderColor: '#000',

    borderWidth: 0.8,
    justifyContent: 'center',
    marginBottom: 20,
  },

  pendingIndex: {
    fontSize: 12,
    color: '#D32F2F',
    fontWeight: 'bold',
  },
  optionText: {
    fontSize: 14,
    color: '#000',
    textAlign: 'center',
  },
  optionSelectedText: {
    fontSize: 14,
    color: '#fff',
  },
});

Am really stuck with how to implement the expected behaviour which is with every same title in the array of objects->that would be grouped together and the answers selected for that particular group would be decremented one by one from the group.length then it moves to the next group.

I hope am able to make myself clear, any help would be great

Answer 1

You can do something like

const groupedBytitle = {};

questions.forEach(question => {
  groupedBytitle.hasOwnProperty(question.title)
    ? groupedBytitle[question.title].push(question)
    : (groupedBytitle[question.title] = [question]);
});

This will group your questions by title

{
title : [question, question],
title2: [question],
title3: [question, question, question]
}

Answer 2

to get number of questions for selected group.

const totalQuestions = questionsData.filter(item => item.group === selectedGroup).length;

this will give you the number of questions for the selected group. where selectedGroup should be the selected group key value (allergies).

Now you need to know how many question you have answered.

const numberOfQuestionsRemaining = totalQuestions.filter(item => item.isAnswer != true).length;

totalQuestions will be array of questions for the selected group. you have filtered the array and get the number of questions which are not answered yet.

you need to do one thing. After you answer any single question, you need to add a key in your question object. > isAnswer = true; it will keep that the question has been answer.