CODEWITHSUNDEEP
jsonangularapi
betterel
betterel

Reputation: 17

Angular 4 saving data and setting new page while loading data from a JSON API

I'm having trouble with the use of a JSON API and Angular with this code

    <div class="col-lg-12">
        <div *ngFor="let Questionnaire of struc.data; let i = index">
          <span>{{i}}.  {{Questionnaire.attributes.content.question}}</span>
        </div>
    </div>

<!--Radio button answers -->

    <div class="col-lg-2" *ngFor="let ans of Questionnaire.attributes.content.answers;let j = index">
         <label class="radio-inline"><input type="radio"  name="answ" [value]="j" >{{ans}}</label>
    </div>

so I'm loading a survey from my JSON API to my website with the help of angular. Now my problem is there are 122 questions at the moment. While loading the answers with ngFor the radio buttons get all the same name an so it's just possible to give one answer for 122 questions:

  1. Question:

Is it possible to give the radio buttons a name which automatically counts up when the next question begins?

  1. Question:

Is it possible to start a new page after loading 5 questions from the API or do I have to post all the 122 Questions to the same page?

Hope somebody knows what to do. Thank you!

Upvotes: 0

Views: 95

Answers (1)

Satish
Satish

Reputation: 141

I would suggest you create a component for displaying Question/Answer, let's say "PollComponent", and handling the server communication via a service i.e. posting the user selected option etc. The input to this component would be a question id. Another component would be responsible for fetching your 122 question id's and rendering the "PollComponent" based on the id selected.

It would be similar to TODO app in angular 2 as shown here. https://github.com/tastejs/todomvc/tree/master/examples/angular2

Upvotes: 1

Related Questions