json Data getting looped incorrectly by each character in v-for in vue js,-CodePudding

The below is my component template

  <template>
    <v-card
    class="mx-auto"
    width="500"
    outlined
  ><v-list-item three-line>
      <v-list-item-content>
      <div class="text-overline mb-4">
              Exam Name
        </div>
        <v-list-item-title class="text-h5 mb-1">
        {{ questions[questionIndex].question }}
        </v-list-item-title>
        <div class="ml-3">
        <v-radio-group v-model="radioGroup">
          <v-radio
            v-for="image in questions[questionIndex].choice_data"
            :key="image.imageId"
            :label="image.name"
            :value="image.imageId"
          ></v-radio>
        </v-radio-group>
        </div>
      </v-list-item-content>
    </v-list-item>

    <v-card-actions>
      <v-btn
        outlined
        rounded
        text
        @click="getNextQuestion()"
      >
        Next
      </v-btn>
    </v-card-actions>
  </v-card>
</template>

My component script is given below

    <script>
     import axios from 'axios'
      export default {
       name: 'examination',
        components:{
      // axios
       },
    data () {
      return {
        examId: '',
        questions: '',
        questionIndex: 0,
      }
    },
    created() {
      this.examId = new URL(location.href).searchParams.get('examId');
      this.loadQuestions()
    },
    methods: {
      async loadQuestions() {
        let options = {
          url: 'http://localhost:5000/examination/get-questions',
          method: 'GET',
          data: {
            id: this.examId,
          }
        }
        let self = this
      await axios.get(options.url '?id' this.examId)
      .then(function (response) {
        self.questions = response.data;
      })
      },
      getNextQuestion() {
        this.questionIndex  
      }
      }
      }
      response.data = [
{
    "id": 1,
    "question": "What is the question ?",
    "choice_data": "[{imgId:1,name:'qw'},{imgId:2,name:'sadda'},{imgId:3,name:'sdasdsa'}]",
    "score": 1,
    "topic_id": 1,
    "level": "BEGINNER"
},
{
    "id": 2,
    "question": "Second question ?",
    "choice_data": "[{imgId:1,name:'qw'},{imgId:2,name:'sadda'},{imgId:3,name:'sdasdsa'}]",
    "score": 1,
    "topic_id": 1,
    "level": "BEGINNER"
}

]

By calling the request API I am getting the above response,

I was trying to get the names as options in the v-radio element, but instead of looping through the JSON each character in the JSON is getting looped and I am getting that many options equal to the number of characters. Somebody, please help

CodePudding user response：

The problem is, that this "[{imgId:1,name:'qw'},{imgId:2,name:'sadda'},{imgId:3,name:'sdasdsa'}]" is not an array full of objects, it is a string.

So if you try to loop trough a string, you get every part of the string as an element for the loop. Visualize it as that:

"[{imgId:...]" is like ["[", "{", "i", "m", "I", "d", ":" ...]

So to solve your problem, you need choice_data in the needed format (array of objects) inside of your response.data.

Example:

{
   "id": 1,
   "question": "What is the question ?",
   "choice_data": [{imgId:1,name:'qw'},{imgId:2,name:'sadda'},{imgId:3,name:'sdasdsa'}],
   "score": 1,
   "topic_id": 1,
   "level": "BEGINNER"
}

CodePudding user response：

Try parsing the iterated data like

<v-radio-group v-model="radioGroup">
          <v-radio
            v-for="image in JSON.parse(questions[questionIndex].choice_data)" //change added
            :key="image.imgId" //change added
            :label="image.name"
            :value="image.imgId" //change added
          ></v-radio>
</v-radio-group>