Safari on iOS9 is inaccurately calculating the total sum

My code involves calculating the sum of key/value pairs in a hash within a loop. I have noticed that there is a discrepancy in how the sum is calculated on ios9 Safari compared to other platforms. While I can address this issue for this specific scenario, our extensive codebase utilizes similar syntax, prompting me to seek a deeper understanding of:

  1. why ios9 behaves differently
  2. if there is a universal solution that can be applied across all objects with a Vue __ob__ object.

Feel free to test out the code here: . The code snippet is also provided below:

// Defining a hash
var totalItems, sum, type, value
totalItems = {}
totalItems['0'] = 3

// This inclusion of __ob__ is generated dynamically by Vue,
// but for illustrative purposes, it's manually included to highlight the ios9 bug
totalItems.__ob__ = new Object()
Object.defineProperty(totalItems, '__ob__', {
    enumerable: false,
    writable: true,
   configurable: true
  });

// Looping through the hash
sum = 0
for (type in totalItems) {
  value = totalItems[type];
  sum += value;
}

// In ios9 Safari, sum equals 6 -- it iterates over the '0' key twice 
// In other browsers and newer iOS versions, sum equals 3!

UPDATE:

After conducting further research, it seems that this discrepancy is a known bug in Safari on ios9 devices. It affects hashes containing the key '0' as well as arrays. The issue appears to be specific to for-in loops. Other methods like .forEach and .reduce function correctly. View the showcase here: . If liveweave loads slowly initially, try refreshing the page a couple of times. Unfortunately, jsfiddle and codepen do not work properly on ios9 at present. I have reported this problem to Apple.

Answer №1

It is generally advised to avoid using for ... in. Your problem may stem from that approach.

Consider utilizing for ... of ** or a standard **for loop instead.

To understand the intricacies of using for ... in, check out this explanation here

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

Displaying a div upon hovering over another div is resulting in numerous server requests and a flickering effect

I am attempting to create a hover effect where one div floats next to another. The layout of the divs is like a grid, placed side by side. Check out my code on this fiddle. Using plain JavaScript, I want to display a second div (div2) floating next to div ...

typescript error: passing an 'any' type argument to a 'never' type parameter is not allowed

Encountering an error with newUser this.userObj.assigned_to.push(newUser);, receiving argument of type 'any' is not assignable to parameter of type 'never' typescript solution Looking for a way to declare newUser to resolve the error. ...

Using Next Js for Google authentication with Strapi CMS

Recently, I've been working on implementing Google authentication in my Next.js and Strapi application. However, every time I attempt to do so, I encounter the following error: Error: This action with HTTP GET is not supported by NextAuth.js. The i ...

Generating dynamic dropdown lists with JavaScript for variable arrays

I've been scouring the internet for quite some time now, both on this platform and through Google searches, but I can't seem to find what I'm looking for. (Apologies if I missed it and this comes across as a repetitive or annoying question.) ...

Array.from does not create a deep copy

I'm in the process of creating my own Battleship game, and I've been researching for about 10 hours but haven't been able to crack it yet. The issue I'm facing is related to making a deep copy using Array.from; whenever I modify the pl ...

Contrasting an array of items with an array of Objects

I need to match the values in an array called ingredientName with a corresponding array of objects. Here is how they look: const ingredientName = ['chicken', 'cheese', 'tomato', 'lettuce']; let imageObjects = [ { ...

Execute a JavaScript function repeatedly, with a specified delay incorporated into it

I am currently working on a JavaScript function that cycles through background images within a div. The function works well, but it stops once all the images have been displayed. How can I make it start over again after going through all the images? $(do ...

Advantages of utilizing bracket notation (alongside variables) for retrieving a property from an object

When it comes to accessing stored information, utilizing alternatives like the dot operator can be straightforward. However, I’m struggling to grasp the significance of using variables in achieving the same goal. For instance: var myObj = { prop1: "v ...

"Utilize Vue i18n to properly display currency amounts in USD

Whenever I present my currency as USD, it always shows up like this: USD$500.00. I am attempting to eliminate the USD prefix from the beginning. Below is my numberFormats configuration: numberFormats: { 'en': { currency: { ...

Using jQuery to toggle visibility based on scroll position

Recently, I received a web template equipped with a jQuery library called sticky, which essentially makes the navigation "stick" to the top of the page as you scroll. Now, my goal is to integrate a logo into the navigation once it reaches its final positio ...

Using express to activate http compression

Currently experimenting with the Darksky API and came across a query parameter that caught my attention: The extend=hourly option is available. With this option, hour-by-hour data for the next 168 hours will be returned rather than just the next 48. It i ...

Validating Credit Card Numbers with Spaces

Currently, I am in the process of creating a credit card form that requires validation using checkValidity to match the specific card pattern that is dynamically added to the input field. For example, if a user enters a Mastercard number such as 545454545 ...

Scrolling automatically to a DIV is possible with jQuery, however, this feature is functional only on the initial

I'm currently working on a Quiz site and I've encountered a puzzling issue. Since the explanation only appears after an answer is selected - essentially a "hidden" element, I decided to wrap that explanation into a visible DIV. The code I'v ...

Make sure to refresh the node.js express api every minute with the latest timestamp available

I'm currently working on setting up a Node.js Express API to expose a MySQL table. Everything is working fine except for the part where I need to filter data by a current timestamp and update it every few minutes. I've tried using setInterval but ...

Unable to modify the .top attribute style in elements within an arraylist using JavaScript

I need to align multiple images in DIVs on the same line by setting their Top value to match the first image in the array. Here is the code I am struggling with: (addBorder function is called when divs are clicked) <div class="DRAGGABLE ui-widget-cont ...

Utilize the $(#id).html(content) method to populate the following column with desired content

Here is a snippet of my HTML code: <div class="row margin-top-3"> <div class="col-sm-7"> <h2>NFTs</h2> <div class="table-responsive"> <table class="table table-bordered&qu ...

Error encountered when attempting to integrate FontAwesome into the body of a Next.js Link

I'm currently using the react-fontawesome library in my project built with Next.js. However, I've encountered an issue when trying to include an icon inside the Link component. The error message is confusing and I can't seem to figure out wh ...

What is the best way to traverse through a nested JSON file with d3.js?

Greetings. I am currently facing a challenge in navigating through a nested JSON file. Below is the JSON data that I need assistance with: {"Id":466,"Name":"korea", "Occurrences": ...

Utilizing PrimeVue Toast to showcase rich HTML content

Looking for a way to showcase a link in a primevue toast message without using the v-html directive or triple brackets. Anyone have any alternative solutions to suggest? ...

What is the best way to set up a local node server on a subdirectory?

In my vuejs application, I am looking to replicate a production environment locally where the deployment is on a subfolder such as www.domain.com/subfolder1. Is there a way to configure my local node server so that the application runs on localhost:port/s ...