Combining Arrays in Vue: A Guide on Merging Two Arrays from the Same Object

Question

Combining Arrays in Vue: A Guide on Merging Two Arrays from the Same Object

My current task involves retrieving data from an API that provides me with a collection of items. Each item consists of a string labeled correct_answer and an array named incorrect_answers.

I am in the process of merging these values within each item so that when I utilize v-for, it will iterate through the combined answers in a single loop. Additionally, I aim to randomize the sequence of these answers.

Here is an illustration of what the object resembles:

"results": [
    {
      "question": "Where was the Games of the XXII Olympiad held?",
      "correct_answer": "Moscow",
      "incorrect_answers": [
        "Barcelona",
        "Tokyo",
        "Los Angeles"
      ]
    },
    {
      "question": "What is the first weapon you acquire in Half-Life?",
      "correct_answer": "A crowbar",
      "incorrect_answers": [
        "A pistol",
        "The H.E.V suit",
        "Your fists"
      ]
    },
]

javascript arrays vue.js vuejs2

Answer 1

Answer №1

let games = [
    {
      "question": "Where was the FIFA World Cup held in 2018?",
      "correct_answer": "Russia",
      "incorrect_answers": [
        "Brazil",
        "Germany",
        "France"
      ]
    },
    {
      "question": "What is the main character's name in The Witcher series?",
      "correct_answer": "Geralt of Rivia",
      "incorrect_answers": [
        "Ciri",
        "Yennefer",
        "Triss Merigold"
      ]
    }
]

let gameAnswers = games.map(item => [item.correct_answer, ...item.incorrect_answers])

console.log(gameAnswers[0])
console.log(gameAnswers[1])

Answer 2

let games = [
    {
      "question": "Where was the FIFA World Cup held in 2018?",
      "correct_answer": "Russia",
      "incorrect_answers": [
        "Brazil",
        "Germany",
        "France"
      ]
    },
    {
      "question": "What is the main character's name in The Witcher series?",
      "correct_answer": "Geralt of Rivia",
      "incorrect_answers": [
        "Ciri",
        "Yennefer",
        "Triss Merigold"
      ]
    }
]

let gameAnswers = games.map(item => [item.correct_answer, ...item.incorrect_answers])

console.log(gameAnswers[0])
console.log(gameAnswers[1])

Answer 3

Answer №2

To achieve this, you can follow the below steps:

const newData = data.map(x => {
  const answers = [x.correct_answer, ...x.incorrect_answers]
  x.answers = shuffle(answers)
  return x
})

This modified array can be utilized as a computed property (e.g., labeled as questions) in your template:

<fieldset v-for="q in questions" :key="q.question">

const rawData = {
  "results": [
    {
      "question": "Where was the Games of the XXII Olympiad held?",
      "correct_answer": "Moscow",
      "incorrect_answers": [
        "Barcelona",
        "Tokyo",
        "Los Angeles"
      ]
    },
    {
      "question": "What is the first weapon you acquire in Half-Life?",
      "correct_answer": "A crowbar",
      "incorrect_answers": [
        "A pistol",
        "The H.E.V suit",
        "Your fists"
      ]
    },
  ]
}

new Vue({
  el: '#app',
  data() {
    return {
      rawData: rawData.results
    }
  },
  computed: {
    questions() {
      return this.rawData.map(x => {
        const answers = [x.correct_answer, ...x.incorrect_answers]
        x.answers = shuffle(answers)
        this.$set(x, 'answer', null) 
        return x
      })
    }
  }
})

function shuffle(array) {
  let currentIndex = array.length, temporaryValue, randomIndex;

  while (0 !== currentIndex) {

    randomIndex = Math.floor(Math.random() * currentIndex);
    currentIndex -= 1;

    temporaryValue = array[currentIndex];
    array[currentIndex] = array[randomIndex];
    array[randomIndex] = temporaryValue;
  }

  return array;
}

<script src="https://unpkg.com/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="3543405075071b031b0405">[email protected]</a>"></script>

<div id="app">
  <form action="#">
    <fieldset v-for="(q,i) in questions" :key="q.question">
      <h2>{{q.question}} {{q.answer}}</h2>
      
      <div v-for="a in q.answers" :key="a">
        <label>
          <input type="radio" :name="i" :value="a" @change="q.answer = a">
          <span>{{a}}</span>
        </label>
      </div>
    </fieldset>
  </form>
</div>

Answer 4

To achieve this, you can follow the below steps:

const newData = data.map(x => {
  const answers = [x.correct_answer, ...x.incorrect_answers]
  x.answers = shuffle(answers)
  return x
})

This modified array can be utilized as a computed property (e.g., labeled as questions) in your template:

<fieldset v-for="q in questions" :key="q.question">

const rawData = {
  "results": [
    {
      "question": "Where was the Games of the XXII Olympiad held?",
      "correct_answer": "Moscow",
      "incorrect_answers": [
        "Barcelona",
        "Tokyo",
        "Los Angeles"
      ]
    },
    {
      "question": "What is the first weapon you acquire in Half-Life?",
      "correct_answer": "A crowbar",
      "incorrect_answers": [
        "A pistol",
        "The H.E.V suit",
        "Your fists"
      ]
    },
  ]
}

new Vue({
  el: '#app',
  data() {
    return {
      rawData: rawData.results
    }
  },
  computed: {
    questions() {
      return this.rawData.map(x => {
        const answers = [x.correct_answer, ...x.incorrect_answers]
        x.answers = shuffle(answers)
        this.$set(x, 'answer', null) 
        return x
      })
    }
  }
})

function shuffle(array) {
  let currentIndex = array.length, temporaryValue, randomIndex;

  while (0 !== currentIndex) {

    randomIndex = Math.floor(Math.random() * currentIndex);
    currentIndex -= 1;

    temporaryValue = array[currentIndex];
    array[currentIndex] = array[randomIndex];
    array[randomIndex] = temporaryValue;
  }

  return array;
}

<script src="https://unpkg.com/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="3543405075071b031b0405">[email protected]</a>"></script>

<div id="app">
  <form action="#">
    <fieldset v-for="(q,i) in questions" :key="q.question">
      <h2>{{q.question}} {{q.answer}}</h2>
      
      <div v-for="a in q.answers" :key="a">
        <label>
          <input type="radio" :name="i" :value="a" @change="q.answer = a">
          <span>{{a}}</span>
        </label>
      </div>
    </fieldset>
  </form>
</div>

Answer 5

Answer №3

Have you tried using the spread operator to merge multiple arrays in JavaScript like this: let merged = [item.correct_answer, ...item.incorrect_answers]?

Answer 6

Have you tried using the spread operator to merge multiple arrays in JavaScript like this: let merged = [item.correct_answer, ...item.incorrect_answers]?

Combining Arrays in Vue: A Guide on Merging Two Arrays from the Same Object

Answer №1

Answer №2

Answer №3

Similar questions

JQuery failing to validate the form

Is it necessary for JavaScript functions to be stored in a separate file in order to be invoked?

Looking to compare the values of objects in one array with the values of objects in another array

The view "skills.ejs" could not be found in the views directory

Tips on displaying five bootstrap modal popups simultaneously on a webpage

Creating a personalized format for Mongoose aggregate results

Iterating through a string array and an array containing arrays in Ruby

Guide on utilizing angularjs $q.all() method with a dynamically generated set of promises

Aggregating various database entries into an array

Siblings mousedown event propagation

Adjusting Timeout for Specific HTTP Endpoint in NestJS

(Enhancing Angular) Capture HttpResponse errors and seamlessly proceed with the Observable

Refreshing a Particular JavaScript File in Electron Upon Request

After updating to the latest npm version, the NodeJS server continues to display the error message "Upgrade Required" when loading pages

The requested module cannot be located, were you referring to "js" instead?

Scope of an array being passed

Keep the columns at a full 100% height while accommodating dynamic content

What is the best way to display an image upon clicking a button?

Transform a string into a property of a JSON object

A guide to combining JSON arrays with identical values in JavaScript