根据ID映射答案

Question

对于这样的测验，我有一个对象数组。

[
    {
        answer: "Patience"
        question: "Name a GNR song..."
        questionId: 13
        questiontype: "text"
        userId: 1
    },
    {
        answer: "ABC"
        question: "Select three MJ songs..."
        questionId: 14
        questiontype: "checkbox"
        userId: 1
    },
    {
        answer: "Thriller"
        question: "Name three MJ songs..."
        questionId: 14
        questiontype: "checkbox"
        userId: 1
    }
]

我想做的是在页面上显示它们。所以现在我正在做这样的事情

{quizData.map((item, index) => {
  return (
    <div key={index}>
      <Col xs={12}>
        <p className="text-start quiz-text">
          <strong>
            Question {item.question}
          </strong>
        </p>
      </Col>
      <Col xs={12}>
        <p className="text-start argent c-font quiz-text">{item.answer}</p>
      </Col>
    </div>
  );
})}

问题是这将为每个答案显示一个新的问题行。因此，对于上面的数据，我看到的内容如下所示

Name a GNR song
    Patience

Select 3 MJ songs
    ABC
    
Select 3 MJ songs
    Thriller

我尝试做的是只有一个问题，但如果该问题有多个答案，则将这些答案显示为该问题的一部分。因此，上面的内容类似于

Name a GNR song
    Patience

Select 3 MJ songs
    ABC
    Thriller

我假设我必须以某种方式匹配questionId，但不确定如何在我的地图中实现这一点？

任何建议都很感谢。

谢谢

Answer 1

您可以首先使用Map构造函数将唯一的问题ID放入一个数组中，如下所示：

var uniqueQIDs = [...new Map(data.map(obj => [obj.questionId, obj])).values()].map(obj => obj.questionId);

然后，您可以循环每个问题ID，并根据它过滤原始数据，如下所示：

{uniqueQIDs.map((qID, index) => {
  return (
    <div key={index}>
      <Col xs={12}>
        <p className="text-start quiz-text">
          <strong>
            Question {qID}
          </strong>
        </p>
      </Col>
      <Col xs={12}>
        {quizData.filter(obj => obj.questionId === qID).map(obj => {
          return <p>{ obj.answer }</p>
        })}
      </Col>
    </div>
  );
})}

Answer 2

您要做的是按questionId对数组中的每个对象进行分组。因此，为了做到这一点，您可以通过以下方式实现this answer中提到的groupBy()的普通版本

const groupBy = (list, keyGetter) => {
    const map = new Map();
    list.forEach((item) => {
         const key = keyGetter(item);
         const collection = map.get(key);
         if (!collection) {
             map.set(key, [item]);
         } else {
             collection.push(item);
         }
    });
    return map;
}

在此之后，您可以简单地将其用作

// list of your question objects
var questions = [
    {
        answer: "Patience",
        question: "Name a GNR song...",
        questionId: 13,
        questiontype: "text",
        userId: 1,
    },
    {
        answer: "ABC",
        question: "Select three MJ songs...",
        questionId: 14,
        questiontype: "checkbox",
        userId: 1,
    },
    {
        answer: "Thriller",
        question: "Name three MJ songs...",
        questionId: 14,
        questiontype: "checkbox",
        userId: 1,
    }
];

// groupBy function here shall return a Map object having questionId as key and
// list of objects having that questionId as value as specified in callback passed in
const myMap = groupBy(questions, x => x.questionId)

// Now you can simply iterate over the myMap object by using forEach
myMap.forEach(
    group => { // group is the list of objects having same questionId
        console.log(group[0].question);
        group.map( // you can simply map your group like this
            object => console.log("   ", object.answer) 
        )
    }
)

// OUTPUT:

// Name a GNR song...
//     Patience
// Select three MJ songs...
//     ABC
//     Thriller

More about Map forEach

Answer 3

在实现之前，您可以使用array.filter()或for循环来修改数组。在jsx的map中实现之前，必须生成正确的数组