show api data to frontend(poll) using reactjs

Question

I want to fetch data from API and show frontend using react but I am getting error from frontend side which is (TypeError: answers.map is not a function ) so how can I solve this error --

MY CODE IS -

import React, { useState, useEffect } from "react";
import Poll from "react-polls";
import { getPolls } from "../helper/coreapicalls";

const MainPoll = () => {
  const [polls, setPoll] = useState([]);
  const [error, seterror] = useState(false);
  // Setting answers to state to reload the component with each vote
  const [pollAnswers, setPollAnswers] = useState([]);

  useEffect(() => {
    loadPoll();
  }, []);

  const loadPoll = () => {
    getPolls().then((data) => {
      if (data.error) {
        seterror(data.error);
      } else {
        setPoll(data);
        console.log(data);
      }
    });
  };

  // Handling user vote
  // Increments the votes count of answer when the user votes

  return (
    <div className="">
      <div className="container">
        <h1 className="blog_heading">Poll's of the Day</h1>
        <div className="row">
          {polls.reverse().map((poll, index) => (
            <div className="col-lg-4 col-12" key={index}>
              <Poll question={poll.question} answers={poll.options} />
            </div>
          ))}
        </div>
      </div>
    </div>
  );
};

export default MainPoll;

Data which I am getting from API is- enter image description here

Here I have Question , 3 options how can I show to frontend

Error -enter image description here

already answer this question here

antoineso
– antoineso

2021-01-29 11:21:20 +00:00
Commented Jan 29, 2021 at 11:21 — antoineso
– antoineso, Commented Jan 29, 2021 at 11:21

Yaroslav Bigus · Accepted Answer · 2021-01-29 12:20:19Z

0

The problem is:

field options from the API is an object as I see.

But Poll component trying to interact with it like it is an Array: answers.map(answer => answer.option)

As I see from the doc, data format should be:

[
  { option: 'Yes', votes: 8 },
  { option: 'No', votes: 2 }
]

UPDATE: you can use a similar snippet to transform your data into the required format.

data.map(answer => {
  return {
    question: answer.question,
    answers: Object.keys(answer.options).map(key => {return {option: key, votes: 0}})
  }
})

edited Jan 29, 2021 at 12:20

answered Jan 29, 2021 at 11:19

Yaroslav Bigus

6787 silver badges24 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

motivation Thoughts Over a year ago

so how can I resolve this issue @yaroslav

Yaroslav Bigus Over a year ago

@motivationThoughts I believe, you can transform you data using something like this: data.map(answer => { return { question: answer.question, answers: Object.keys(answer.options).map(key => {return {option: key, votes: 0}}) } }) but to be honest, it's hard to figure out just by judging pictures, if it's doesn't work can you create a reproducible demo? Use codesandbox.io for example

motivation Thoughts Over a year ago

hi, how can I get option:key length, { actually I want to do insted of votes: 0 want to get length of options array like options: none: [] student: ["5fe58e5d076606051035b131"] teacher: ["5f86c34c5bb3de105041a60a"] ** lenght of all the id store here** @yaroslav

Yaroslav Bigus Over a year ago

should smth like this: answer.options[key].length

Collectives™ on Stack Overflow

show api data to frontend(poll) using reactjs

1 Answer 1

4 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related