Working with JSON API, manipulating data and display with repeater (Open Trivia DB)

[kidino]

I am trying to build a quiz website using Open Trivia DB API. Example, https://opentdb.com/api.php?amount=10

The URL will give you a set of questions, with the correct and wrong answers for each of them. Before I display the options to the viewers, I need to combine the wrong and correct answers, and shuffle it up. So far, I can display all the options but I don’t think it is the right way to do it. I put two rows in a flex column, and I size one row 75% for wrong answers and the other 25% for right answers. But the right answer will always be the first (or the last, depending on my layout).

So how do I go about with something like that, and displaying the options with Repeater?

Is there a way I can create my own array variable inside the outer repeater, and use that new variable with repeater to display the options?

Checkout my screenshots and example JSON

[Apple]

You’re right this is not the best way to do this

You want to create a new array that holds both the correct and incorrect answers:

return correct_answer.concat(incorrect_answers);

You can read this topic to learn about array concatenation. The above code is JavaScript and runs within the RunJS module:

RunJS 1.2.0

Inspired by @Apple And very thankful for his insights and ideas I just released a custom extension for nodejs to run custom js code without having to create a custom module or a formatter. Sometimes for small quick things you just don’t want to go through the hassle of creating a full extension for a very specific thing that could be easily achieved in a few seconds of writing some JS code. There are also other cases where a custom extension will serve the purpose for a very specific case bu…

You can also get rid of the 25%/75% design thingy you made - you only need one repeater filling 100%

[kidino]

So that means … I need to read the external API using our (Wappler) API first, manipulate the data, then only get the frontend to read it from our backend API.

Is that correct?

Just to confirm, I can’t (Wappler has yet to support) manipulate the data on the frontend?

[Apple]

@kidino

So that means … I need to read the external API using our (Wappler) API first, manipulate the data, then only get the frontend to read it from our backend API.

That was my original idea, yes

@kidino

Just to confirm, I can’t (Wappler has yet to support) manipulate the data on the frontend?

You can also do everything on the front-end, but I don’t have enough experience. Here’s a starter to work on the front-end/client-side:

Working with Arrays

[kidino]

Alright … thanks. I will give this a try.