Back

Technologies:

javascriptjavascript
reactjsreactjs
avatar
Tolerim
a month ago

What is the process for altering the object array format to transmit data via an API in React Js?

The question has been closed for not meeting the guidelines outlined in the Stack Overflow help center. However, the original poster wants to send the quiz data in a specific format to an API. The format required by the API is shown below: 
{
    "ques": [
        {
            "id": "35",
            "res": "one"
        },
        {

            "Id": "48",
            "res": "two"
        }
]
}
Currently, the format of the quiz data is not in the required format. The original poster has included their code which uses radio inputs and a button to move to the next question. The code includes a function to handle the radio inputs, and another function to handle the logic for moving to the next question. To reiterate, the original poster needs to modify their quiz data format to match the required format for the API.
Answers(2)
avatar
Vogi
a month ago
Verified Answer
To modify the quiz data format to match the required format for the API, you can create a new object with the required format and then loop through the original quiz data to populate the new object. Here's an example of how you can do this: 
const quizData = [
  {
    id: 35,
    res: "one",
  },
  {
    id: 48,
    res: "two",
  },
];

const formattedQuizData = {
  ques: [],
};

quizData.forEach((question) => {
  const formattedQuestion = {
    id: question.id.toString(),
    res: question.res,
  };
  formattedQuizData.ques.push(formattedQuestion);
});

console.log(formattedQuizData);
This will output: 
{
  ques: [
    {
      id: "35",
      res: "one",
    },
    {
      id: "48",
      res: "two",
    },
  ],
}
You can then use formattedQuizData to send the quiz data in the required format to the API. I hope this helps! Let me know if you have any other questions.

Sources

How to remove "Please match the requested format"Google Forms Quiz Score Data FormatAdjust your form or quiz settings in Microsoft FormsCreate a quiz with Microsoft Forms
avatar
Tolerim
a month ago
To get the required format, you need to modify your code to map the selected answers array to the required format. You can achieve this by creating a new array of objects using the map method and returning an object with the id and res properties set to the index and value of the selected answer respectively. Here is how you can modify your code: 
const handleRadioInput = (e) => {
  const index = parseInt(e.target.name);
  const answer = e.target.value;
  setSelectedAnswers((prevAnswers) => {
    const newAnswers = [...prevAnswers];
    newAnswers[index] = answer;
    return newAnswers;
  });
};

const nextQuestion = () => {
  const formattedAnswers = selectedAnswers.map((answer, index) => ({
    id: index + 1,
    res: answer
  }));
  console.log('selectedAnswers', { "ques": formattedAnswers });
}

<input type="radio" name={current} value={option} key={i} checked={selectedAnswers.includes(option)} onChange={handleRadioInput} />

<Button className="btn-export" type="primary" size="large"
  disabled={selectedAnswers.some((answer) => answer === undefined)} onClick={nextQuestion}>
  Next
</Button>
In the nextQuestion function, we are first mapping the selectedAnswers array to a new array of objects using the map method. The id property of each object is set to the index plus 1, and the res property is set to the corresponding value of the selected answer. We are then logging the formatted object to the console. Note that we also changed the disabled property of the Button component to check if any answer is undefined, as opposed to checking if selectedAnswerIndex is null.
;