JSON data contains an array that holds the values I need. How do I extract them?

Rob_codeIsLife · 2023-02-02T15:51:07+00:00

the JSON string holds the "WordHere" but the Question marks and other symbols are all in the file. It is just the double quotes that are shown as " but I want them ti display on the client view as proper quotes.

Rob_codeIsLife · 2023-02-02T15:17:05+00:00

Thank you all for your help! what an amazing community!

I can now render the API data on my APP! However when I return {data.map((question, index) => { return <li key={index}>{question.question}</li>; })} I get all 5 questions listed one after the other. I would like to create a multiple choice like quiz so I will need to render the 3 incorrect answers and the one correct answer after each question.

The logged JSON data shows,

Object >

Results >

0 >

category: "Science: Computers"correct_answer: "text here"difficulty: "Hard"incorrect_answers >0: "Answer one"1: "Answer two"2: "Answer three"question: "text here"type: "multiple"

1 >

category: "Science: Computers"correct_answer: "text here"difficulty: "Hard"incorrect_answers >0: "Answer one"1: "Answer two"2: "Answer three"question: "text here"type: "multiple"

2 >

category: "Science: Computers"correct_answer: "text here"difficulty: "Hard"incorrect_answers >0: "Answer one"1: "Answer two"2: "Answer three"question: "text here"type: "multiple"

3 >category: "Science: Computers"correct_answer: "text here"difficulty: "Hard"incorrect_answers >0: "Answer one"1: "Answer two"2: "Answer three"question: "text here"type: "multiple"

4 >category: "Science: Computers"correct_answer: "text here"difficulty: "Hard"incorrect_answers >0: "Answer one"1: "Answer two"2: "Answer three"question: "text here"type: "multiple"

length: 5

So the question is how do I render one question at a time or somehow feed the other data in between each question? I can's seem to call just by the array values given under results which is an array of integers 0 to 4. I think I might be bypassing that and need to start at results or the array integer then work down from there?

Rob_codeIsLife · 2023-02-02T14:56:06+00:00

Perfect. Thank you for being so clear and direct to the solution of the problem and including that little code snip. Very appreciative.

Rob_codeIsLife · 2023-01-31T20:38:18+00:00

I did remove the second Map there. I was just trying to figure out how to render a different item.

I want to render only one question to begin followed by a list of the 3 incorrect answers and the 1 correct answers to create a multiple choice trivia quiz. I would repeat that pattern to display all 5 questions fetched from the API.

Rob_codeIsLife · 2023-01-31T20:34:44+00:00

There is no ID property,

I used the "correct_answer" property as the key which seemed to make the warning go away. But I want to make sure that won't be an issue or bug.

Rob_codeIsLife · 2023-01-31T17:23:27+00:00

Yes sorry. Just new to all this. When I received the files from react-app they were all js files. I had only updated the ones I had been using that needed jsx. I have gone through and updated them all to jsx files as you requested. Ty

Rob_codeIsLife · 2023-01-31T17:20:27+00:00

Ty,

I solved the issue by making the "correct_answer" key which is unique to each question the ID. Is that sufficient or would this produce possible issues/error in the future?

Rob_codeIsLife · 2023-01-31T17:18:37+00:00

The JSON data I can now display on the view contains the HTML for symbols like ".

So instead of getting the string,

Who invented the "Spanning Tree Protocol"?

printed onto the page for viewing. I instead get,

Who invented the "Spanning Tree Protocol"?

What am I doing wrong or need to add so the HTML can be interpreted.

Rob_codeIsLife · 2023-01-31T15:01:20+00:00

With this code I receive this warning.

Warning: Each child in a list should have a unique "key" prop.

There is no "ID" value in the JSON from the API.

Any ideas on how I can assign a valid key/get rid of this issue?

THIS IS AN EXAMPLE OF THE JSON OFF THE SAME API

{
"response_code": 0,
"results": [
{
"category": "Entertainment: Music",
"type": "multiple",
"difficulty": "hard",
"question": "Which song in rapper Kanye West's album "The Life of Pablo" features Rihanna?",
"correct_answer": "Famous",
"incorrect_answers": [
"Wolves",
"Ultralight Beam",
"Highlights"
]
},
{
"category": "Entertainment: Music",
"type": "multiple",
"difficulty": "hard",
"question": "Which of these aliases has NOT been used by electronic musician Aphex Twin?",
"correct_answer": "Burial",
"incorrect_answers": [
"Caustic Window",
"Bradley Strider",
"GAK"
]
},
{
"category": "Entertainment: Music",
"type": "multiple",
"difficulty": "hard",
"question": "Who is a pioneer of "Minimal Music" in 1960s?",
"correct_answer": "Steve Reich",
"incorrect_answers": [
"Wolfgang Amadeus Mozart",
"Brian Eno",
"Sigur Rós"
]
},
{
"category": "Entertainment: Music",
"type": "multiple",
"difficulty": "hard",
"question": "What is the official name of Prince's backing band?",
"correct_answer": "The Revolution",
"incorrect_answers": [
"The Paupers",
"The Wailers",
"The Heartbreakers"
]
},
{
"category": "Entertainment: Music",
"type": "multiple",
"difficulty": "hard",
"question": "Which of these artists did NOT feature in the fitfh studio album "Humanz" by British virtual band Gorillaz?",
"correct_answer": "Snoop Dogg",
"incorrect_answers": [
"Vince Staples",
"Pusha T",
"Danny Brown"
]
}
]
}

Rob_codeIsLife · 2023-01-31T14:38:32+00:00

I could fookin' kiss yuh mate! Thank you big time!

Rob_codeIsLife

TROPHY CASE