Obtain the shared value between two data entries within a Vue array

Question

Obtain the shared value between two data entries within a Vue array

In my Vue.js data, I have two records with the same question id. I want to select both record options and only one of the questions.

[
  {
     "id":7,
     "question_id":102,
     "option":"true",
     "is_correct":"1",
     "question":"This is a question",
     "option_type":1
 },
{
     "id":8,
     "question_id":102,
     "option":"false",
     "is_correct":"0",
     "question":"This is a question",
      "option_type":1
}
]

Expected outcome After executing the solution, I expect the following result:

    question_id:[
        { 
            "id":7,
            "option":"true",
            "is_correct":"1",
            "question":"This is a question",
            "option_type":1
         }
         { 
            "id":8,
            "option":"false",
            "is_correct":"0",
            "question":"This is a question",
            "option_type":1
         }
       ]

Attempted Approach

   <label class="form-control" v-for="question in response" :key="question.id" track-by="question_id">{{ question.question }}</label>
    <div v-for="option in response" :key="option.id">
    <input type="radio" name="pickedAnswer" id="option" :value="option.id">
    <label for="option" class="ml-3">{{option.option}}</label><br>                                    </div>

I will be waiting for your comments. Thank you.

vue.js

Answer 1

Answer №1

Here is one way to accomplish this using plain JavaScript:

let data = [
  {
     "id":7,
     "question_id":102,
     "option":"true",
     "is_correct":"1",
     "question":"This is a question",
     "option_type":1
  },
  {
     "id":8,
     "question_id":102,
     "option":"false",
     "is_correct":"0",
     "question":"This is a question",
      "option_type":1
  }
]

const groupByQuestionId = function(data, key) {
  return data.reduce(function(result, element) {
    (result[element[key]] = result[element[key]] || []).push(element);
    delete element[key];
    return result;
  }, {});
};

console.log(groupByQuestionId(data, 'question_id'));

Answer 2

Here is one way to accomplish this using plain JavaScript:

let data = [
  {
     "id":7,
     "question_id":102,
     "option":"true",
     "is_correct":"1",
     "question":"This is a question",
     "option_type":1
  },
  {
     "id":8,
     "question_id":102,
     "option":"false",
     "is_correct":"0",
     "question":"This is a question",
      "option_type":1
  }
]

const groupByQuestionId = function(data, key) {
  return data.reduce(function(result, element) {
    (result[element[key]] = result[element[key]] || []).push(element);
    delete element[key];
    return result;
  }, {});
};

console.log(groupByQuestionId(data, 'question_id'));

Answer 3

Answer №2

If I grasp your objective correctly, the use of Vue may not be necessary. Vue v-for and HTML are typically used to display data rather than manipulate it. My recommendation would be to create a function (either within the created() hook or mounted(), depending on where your data originates) and implement groupBy to gather all the necessary information.

There are two common approaches to achieving this: utilizing lodash or leveraging native ES6 features. Below, I will outline both methods:

 // ES6 

 resp.reduce((acc, value) => {
   acc[value.question_id] = [...acc[value.question_id] || [], value]
 return acc;
}, {});

// { 102: [{ id: 7, ...}, { id: 8, ...}] }

You can employ a reduce function to construct a new object with question_id as the key and the grouped questions as the value.

Lodash

// Lodash

_.groupBy(a, 'question_id')

// { 102: [{ id: 7, ...}, { id: 8, ...}] }

While using Lodash is more straightforward, keep in mind that you will need to install the lodash library (which might not be ideal for just one function, given the size of lodash). If you decide to go with Lodash, I recommend reading an article like The correct way to import lodash for guidance on importing lodash without impacting your build process too heavily.

Answer 4

If I grasp your objective correctly, the use of Vue may not be necessary. Vue v-for and HTML are typically used to display data rather than manipulate it. My recommendation would be to create a function (either within the created() hook or mounted(), depending on where your data originates) and implement groupBy to gather all the necessary information.

There are two common approaches to achieving this: utilizing lodash or leveraging native ES6 features. Below, I will outline both methods:

 // ES6 

 resp.reduce((acc, value) => {
   acc[value.question_id] = [...acc[value.question_id] || [], value]
 return acc;
}, {});

// { 102: [{ id: 7, ...}, { id: 8, ...}] }

You can employ a reduce function to construct a new object with question_id as the key and the grouped questions as the value.

Lodash

// Lodash

_.groupBy(a, 'question_id')

// { 102: [{ id: 7, ...}, { id: 8, ...}] }

While using Lodash is more straightforward, keep in mind that you will need to install the lodash library (which might not be ideal for just one function, given the size of lodash). If you decide to go with Lodash, I recommend reading an article like The correct way to import lodash for guidance on importing lodash without impacting your build process too heavily.

Obtain the shared value between two data entries within a Vue array

Answer №1

Answer №2

Similar questions

What comes after fetching data with axios but before the webpage is rendered?

Tips for creating a vertical scrollbar within a row component

Error: Combining objects that are not defined is not allowed

The UglifyJsPlugin in Webpack encounters an issue when processing Node modules that contain the "let" keyword

What could be causing Vue Material dialogs to frequently slide off the screen?

Error 405 (Invalid Method) in VueJs: You are not allowed to use

VueJS in collaboration with Quasar framework

What is the preferred approach: modifying the Pinia state within actions or directly within the component?

"When the value is false, use the Vue binding to apply a specific

Using the Gmail API to retrieve the access token details by extracting the "code" parameter from the URL of a pop-up window

Navigating through property objects in Vue: accessing individual elements

"I encountered an error while sorting lists in Vue 3 - the function this.lists.sort is not

Cross-Origin Resource Sharing (CORS): The preflight request response does not satisfy the access control check

What is the process for calculating data from an external document?

Vue.js application failing to display images fetched from the server

When there is an expensive calculation following a Vue virtual DOM update, the update may not be

Encountering the "Module not found" error message stating "Error: Unable to locate '@uidu/ckeditor5-tokenizr' when trying to import an npm package that I have just installed."

The second parameter of the Ajax request is not defined

The use of script src with vue.js is causing issues

how to use $emit to modify a computed property in VueJS