In JavaScript, not all elements are removed in a single iteration, even if the condition is consistently met

I'm currently attempting to compare two arrays containing multiple objects and remove elements based on a condition. To my surprise, while testing in Chrome's console, I noticed that the first array (arr1) is not being emptied even though I am using an if condition that should always evaluate to true. After the initial iteration, there is always at least one object remaining, and it takes several loops for the element to finally be removed. Is there something obvious that I'm overlooking? It feels like such a fundamental JavaScript mistake.

var car1 = {
  type: 'das',
  model: '1',
  color: 'blue'
} //sample object
arr1 = []
for (i = 0; i < 5; i++) {
  arr1[i] = car1
} //filling object with values

for (i in arr1) {
  if (arr1[i].type == 'das') { //removing element with condition which always matches
    arr1.splice(i, 1);
  }
}
console.log(arr1);

Answer №1

It is crucial to avoid altering the value of an array within its loop.

var car1 = {
  type: 'das',
  model: '1',
  color: 'blue'
} //sample object
arr1 = []
for (i = 0; i < 5; i++) {
  arr1[i] = car1
} //filling object with values
arr2 = [];
for (i in arr1) {
  if (arr1[i].type != 'das') { //removing element with condition which always matches
    arr2.push(arr1[i]);
  }
}
arr1 = arr2
console.log(arr1);

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Step-by-step guide to building multiple layouts in React.js using react-router-dom

For my new web application, I am looking to create two distinct layouts based on the user type. If the user is an admin, they should see the dashboard layout, while employees should be directed to the form layout. Initially, only the login page will be dis ...

Creating a POST Endpoint in Express JS

Hey there! Can someone help me out with creating a basic login script for an app using Express JS? I've been working on a POST function to handle this task, but unfortunately, when I try to echo back the parameters being passed (testing via Postman), ...

Mastering the art of managing promises within nested loops

Embarking on my Promise journey, I find myself faced with a scenario where a list of objects within another list of objects needs to be updated based on responses from an external API. I've attempted to simulate the scenario below. The code snippet f ...

Store a JSON object without creating a reference to it

My issue is presented in a much simpler manner. Here is the json (you can view it here if you wish) {"resource":[{"id":"1408694994","obj":[{"id":"1","action":[{"name":"ON","id":"301"},{"name":"OFF","id":"302"}]},{"id":"2","action":[{"name":"ON","id":"303 ...

Move to Fieldset Upon Link Click

Here's an example of what I have implemented so far here It's evident that this is not fully functional due to the PHP and jQuery integration. This demo is just a showcase of my progress. I am looking to create a functionality where clicking on ...

Utilizing JavaScript to verify the presence of a div element within dynamically injected HTML code

While working on a website, I have implemented an embed function which involves calling a javascript from my server to inject HTML on another remote server. To ensure that these embeds also benefit from Google ranking, I have included a piece of HTML in t ...

Can you provide the date time format used in the JSTL fmt tag?

To display date and time in JSTL, the fmt tag can be utilized. Details can be found here In order to format the date for use with front end tools like the datatable, a specific date format needs to be specified. By using parameters such as type or dateSty ...

Simulated function invocation just one time

I am testing the functionality of two functions in the same file. One of the functions is supposed to call the other, and I need to verify that this interaction occurs. import * as strings from './strings'; const generateUuidSpy = jest.spyOn(st ...

Is there a way to transform a JavaScript array into JSON format in order to use it as the returned data from a RESTful API

Currently, I am exploring how to efficiently convert an array of arrays into a JSON string for retrieval through a RESTful API. On my server, data is fetched from a database in the format: {"user":"some name","age":number ...

Changes made in Vuex will not be saved until they are manually committed using developer tools

One of the modules in my Vuex store is called login.js and it looks like this: import axios from "axios"; import router from "@/router"; axios.defaults.baseURL = process.env.VUE_APP_API_ENDPOINT; const state = { access_token: localStorage.getItem("acc ...

Scroll horizontally within the div before scrolling down the page

After reviewing other questions, it's important to note that the scroll I am looking for is horizontal, not vertical. My goal is to have a div on a page automatically start scrolling when it reaches the center or becomes visible, and then allow the pa ...

Tips on tallying the frequency of items in a state array

I'm currently working on an application in which clicking a button adds the item's value to the state. The button is clickable multiple times, allowing the same item to be added multiple times in the state array. My current code snippet: export ...

Tips for concealing the bar graph while maintaining the visibility of the data labels in HighCharts

Is there a way to hide one bar but keep the data labels in HighCharts? I have 3 bars: Target Realization Percentage I want to display only the first and second bars, with only 1 data label which is the percentage. So, I made some adjustments to my co ...

Generating PNG images with text using Node.js

I am currently working on generating a PNG file to be sent to clients through HTTP as an image/png response type. This new file will be created by combining 3 base PNG files and inserting custom text in the center of the image. Unfortunately, I have not ...

Hiding and showing div elements using CSS, JavaScript, and PHP

Here is the current code snippet: <? while ($row1 = mysql_fetch_object($result1)) { echo '<a href="#" onclick="showhide("'.$row1->id.'");">Name</a>'; while ($row2 = mysql_fetch_object($result2)) { ...

Three Divs stacked on top of each other, with varying heights based on

I am seeking a solution for creating a layout with three vertically stacked divs. The top div must have a fixed height of 60px. The middle div might contain content exceeding its height, therefore we've set it to overflow: auto. But regardless of th ...

Display previous messages in React JS chat when scrolling upwards

I am currently working on a chat application, as depicted in the image. Once the chat is initiated, it automatically scrolls down to display the most recent messages. My goal is to implement a feature where when a user scrolls up to reach the oldest mess ...

An error occurred while trying to initialize the ui.bootstrap.demo module in AngularJS

Currently, I am in the process of learning angularjs and have encountered a roadblock. An error keeps popping up: ncaught Error: [$injector:modulerr] Failed to instantiate module ui.bootstrap.demo due to: Error: [$injector:nomod] Module 'ui.bootstr ...

In the realm of JavaScript, the localeCompare() string method is more than willing to accept the presence of 'undefined' as a valid parameter for 'locale', while opting to outright reject any instance of

I have discovered a method to sort strings naturally const rows = ['37-SK', '4-ML', '41-NP', '2-YZ', '21', '26-BF']; console.log(rows.sort((a, b) => a.localeCompare(b, undefined, { numeric: tru ...

Troubleshooting incompatibility issues between Tailwindcss and NextJS 12 due to experimental features

When I first started using NextJS 12, I decided to try building a project with tailwind. This is my package.json file: { "name": "test", "version": "0.1.0", "private": true, "scripts": { ...