Is there a method to verify the presence of an object within an array, and if it is not found, add it to the array?

Question

Is there a method to verify the presence of an object within an array, and if it is not found, add it to the array?

In this quiz, I am collecting question numbers and answers to store in an array. The goal is to replace old answers with new ones if a person changes their response on the quiz. If a question hasn't been answered yet, it should be added to the array at the appropriate index location.

let questions = [];


function get_id(xd,jf){

    let question = (xd.parentNode.id);
    let question_num = document.getElementById(question).getAttribute("value");
    let number = document.getElementById(jf).getAttribute("value");
    let new_answer = {Question:question_num, Answer:number};

    questions.push(new_answer);

    let found = questions.includes(new_answer);

    console.log(found);

    if (found == false) {
        questions.push(new_answer);

    };

    // if (questions.some... " i couldn't understand how to use the some method"

    //for (i = 0; i < questions.length; i++) { "and was thinking about using a for loop somehow."

    console.log(questions);

};

I attempted to use the includes method to compare new and old answers, but it always returned true regardless of actual comparison results.

Below are other ideas I tried, but being new to programming, I'm unsure of the approach.

Here's the HTML structure of a single question:

<div class="row" id="question_1" value="0">
  <div class="col-sm-2">
    <div class="A">
      how are you?
    </div>
  </div>
  <div class="col-sm-2" id="answer5" onclick="get_id(this, id)" value="10">
    <button id="answer5" value="10">
      5
    </button>
  </div>
  <div class="col-sm-2" id="answer4" onclick="get_id(this, id)" value="8">
    <button id="answer4" value="8">
      4
    </button>
  </div>
  <div class="col-sm-2" id="answer3" onclick="get_id(this, id)" value="5">
    <button id="answer3" value="5">
      3
    </button>
  </div>
  <div class="col-sm-2" id="answer2" onclick="get_id(this, id)" value="2">
    <button id="answer2" value="2">
      2
    </button>
  </div>
  <div class="col-sm-2" id="answer1" onclick="get_id(this, id)" value="0">
    <button id="answer1" value="0">
      1
    </button>
  </div>
</div>

I haven't utilized button properties beyond styling them.

javascript arrays object

Answer 1

Answer №1

You are overcomplicating the issue.

It's worth noting that the array index and question numbers match, so there's no need to search for an answer in the array. It's either already in place or not.

The correct method to insert an answer into the array is not using push, as it adds to the end of the array. Instead, you should place the answer in its correct array position like this:

questions[question_num] = {Question: question_num, Answer: value);

// JavaScript code here

Answer 2

You are overcomplicating the issue.

It's worth noting that the array index and question numbers match, so there's no need to search for an answer in the array. It's either already in place or not.

The correct method to insert an answer into the array is not using push, as it adds to the end of the array. Instead, you should place the answer in its correct array position like this:

questions[question_num] = {Question: question_num, Answer: value);

// JavaScript code here

Answer 3

Answer №2

In my opinion, the proper method to accomplish this is as follows:

Filter out the questions that have already been answered
If the question has not been answered yet, keep it in the list of questions
Add the new answer to the list of questions.

Here is the code snippet:

questions = questions.filter(q => q.question_num !== new_answer.question_num);

questions.push(new_answer);

Answer 4

In my opinion, the proper method to accomplish this is as follows:

Filter out the questions that have already been answered
If the question has not been answered yet, keep it in the list of questions
Add the new answer to the list of questions.

Here is the code snippet:

questions = questions.filter(q => q.question_num !== new_answer.question_num);

questions.push(new_answer);

Answer 5

Answer №3

Here's a neat way to utilize Array.findIndex. It provides a much cleaner solution:

let questions = [];


function get_id(xd,jf){

    let question = (xd.parentNode.id);
    let question_num = document.getElementById(question).getAttribute("value");
    let number = document.getElementById(jf).getAttribute("value");
    let new_answer = {Question:question_num, Answer:number};

    const found = questions.findIndex(v => v.Question === question_num);
    if(found === -1){
      questions.push(new_answer);
      console.log("new question answered");
      console.log(questions);
      return;
    }
  
    questions[found].Answer = number;
    console.log("new question updated");
    console.log(questions);

};

Feel free to check it out on CodePen :)

Answer 6

Here's a neat way to utilize Array.findIndex. It provides a much cleaner solution:

let questions = [];


function get_id(xd,jf){

    let question = (xd.parentNode.id);
    let question_num = document.getElementById(question).getAttribute("value");
    let number = document.getElementById(jf).getAttribute("value");
    let new_answer = {Question:question_num, Answer:number};

    const found = questions.findIndex(v => v.Question === question_num);
    if(found === -1){
      questions.push(new_answer);
      console.log("new question answered");
      console.log(questions);
      return;
    }
  
    questions[found].Answer = number;
    console.log("new question updated");
    console.log(questions);

};

Feel free to check it out on CodePen :)

Is there a method to verify the presence of an object within an array, and if it is not found, add it to the array?

Answer №1

Answer №2

Answer №3

Similar questions

The HTML form submission button fails to submit the form and instead just refreshes the page

When using node.js with SendGrid to send emails to multiple recipients and adding substitution, a blank value

Discovering nearby intersections within 2 sets of arrays

"Encountering a Node.js error while trying to open an image for the second

What is the process for adjusting the code to manage the labels of specific buttons?

Retrieving data from Ajax and passing it to PHP

Is there a way to eliminate a particular item from a Formdata object array?

What are the steps to integrate openjphjs with next.js?

The functionality of Angular animate becomes compromised when there is a conflict between predefined CSS states and transition states

Having trouble retrieving all JSON properties

Adding two double arrays together using AVX vectorization technique

The push() function for Angular $scope is not defined

mdButton causing multidir error

Streaming data from the server to a Three.JS 3D cube model via Server Sent Events (SSE) is experiencing sluggish performance

Are the keys in Postgresql JSON displayed with underscores separating the letters?

What is an alternative way to replicate the functionality of jQuery's remove() method using only vanilla JavaScript?

What are the best practices for utilizing the createPages API to generate pages through programming?

What is the best way to create a new object in a Vue component with optimal efficiency?

Learn how to store the outcomes of an HTTP operation within array.map() in JavaScript

Tips for optimizing content loading without a full page refresh using Ajax