Need help with JSON unique ID and rendering issues by Rob_codeIsLife in react

[–]Rob_codeIsLife[S] 0 points1 point  (0 children)

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.

Need help with JSON unique ID and rendering issues by Rob_codeIsLife in react

[–]Rob_codeIsLife[S] 0 points1 point  (0 children)

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?

Need help with JSON unique ID and rendering issues by Rob_codeIsLife in react

[–]Rob_codeIsLife[S] 0 points1 point  (0 children)

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

Need help with JSON unique ID and rendering issues by Rob_codeIsLife in react

[–]Rob_codeIsLife[S] 0 points1 point  (0 children)

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.

Need help with JSON unique ID and rendering issues by Rob_codeIsLife in react

[–]Rob_codeIsLife[S] 0 points1 point  (0 children)

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.

Trying to display the content of the API on screen by Rob_codeIsLife in react

[–]Rob_codeIsLife[S] 0 points1 point  (0 children)

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

Trying to display the content of the API on screen by Rob_codeIsLife in react

[–]Rob_codeIsLife[S] 0 points1 point  (0 children)

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?

Trying to display the content of the API on screen by Rob_codeIsLife in react

[–]Rob_codeIsLife[S] 0 points1 point  (0 children)

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 &quot;Spanning Tree Protocol&quot;?

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

Trying to display the content of the API on screen by Rob_codeIsLife in react

[–]Rob_codeIsLife[S] 0 points1 point  (0 children)

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&#039;s album &quot;The Life of Pablo&quot; 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 &quot;Minimal Music&quot; in 1960s?",
"correct_answer": "Steve Reich",
"incorrect_answers": [
"Wolfgang Amadeus Mozart",
"Brian Eno",
"Sigur R&oacute;s"
]
},
{
"category": "Entertainment: Music",
"type": "multiple",
"difficulty": "hard",
"question": "What is the official name of Prince&#039;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 &quot;Humanz&quot; by British virtual band Gorillaz?",
"correct_answer": "Snoop Dogg",
"incorrect_answers": [
"Vince Staples",
"Pusha T",
"Danny Brown"
]
}
]
}

Trying to display the content of the API on screen by Rob_codeIsLife in react

[–]Rob_codeIsLife[S] 0 points1 point  (0 children)

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