The JSON.stringify function is returning inaccurate index structures

https://i.sstatic.net/ptMcW.png

I am attempting to use the JSON.stringify() method on my object (refer to the screenshot).

However, the result I am getting is not what I expected - the indexes of the objects are in the wrong order.

You can view the complete stringified JSON here:

As you can observe, the first index appears as 9:0 instead of 8:0 as anticipated.

What could be causing this issue?

Answer №1

In javascript, the order of keys in Objects is not guaranteed.

To maintain order, consider using an Array of Objects instead.

For example:

{
  "1": [
    { "key": "8:0", ... },
    { "key": "8:30", ... },
    ...
  ],
  "2": ...
}

If you expect to iterate over the top level keys ("1", "2, etc.), maintaining this structure will preserve order.

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

Showcasing or concealing.JSON data depending on the selected item in a React and MaterialUI application

Looking to enhance the user experience, I am developing a dynamic FAQ section sourced from a JSON file containing an array of objects with 'Question' and 'Answer'. https://i.stack.imgur.com/mljpm.png The functionality is such that click ...

Picture that perfectly matches the height of the window

I am looking to create a website design similar to this where an image fills the window until you scroll down. I am not sure how to accomplish this. Would using jQuery be the best option? I haven't been able to find much information on this. While my ...

Bootstrap allows for the use of video backgrounds, offering the option for borders to be included

Having trouble with a Bootstrap HTML page featuring a video background? The issue is that sometimes the video has borders on the left and right, and occasionally on mobile devices as well. Oddly enough, when the browser (Chrome or Firefox) is refreshed, th ...

Utilize VueJS to bind a flat array to a v-model through the selection of multiple checkboxes

My Vue component includes checkboxes that have an array of items as their value: <div v-for="group in groups"> <input type="checkbox" v-model="selected" :value="group"> <template v-for="item in group"> <input type ...

Toggle the visibility of a component by clicking on a specific title within a table, dependent on the column title in Angular 9

Currently, I am developing an Angular application focused on creating a COVID-19 tracking app. In this project, I have designed 2 components - Component A displays a list of all states, while Component B lists all districts within a particular state. To ...

Is there a cutting-edge javascript/jquery tool that enables SQL-type queries on JSON datasets?

About a year ago, this question was posed on Stack Overflow. After searching extensively for answers, it seems that all the libraries I've come across have not been updated in over a year. I'm curious if anyone knows of any currently maintained l ...

What is the most effective way to output data using the response.write method in a Node.js program after retrieving it from a MySQL server?

Currently working on a NodeJS web app and encountering a roadblock. Seeking feedback on my code: var config = require('./config.json'); var mysql = require('mysql'); var http = require('http'); var url = require('url&apo ...

Seamless animation when collapsing element using angular and css exclusively

I am attempting to incorporate a collapsible feature into my application. Rather than relying on external libraries like jQuery, I want to exclusively utilize Angular. For demonstration purposes, I have created a very basic example here: http://jsfiddle.n ...

Ways to modify the values of a Bootstrap Dropdown using a unique identifier

Here is an example of a typical Bootstrap Dropdown: <div class="btn-group"> <button type="button" class="btn btn-lg btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Default option<span class ...

The useEffect hook is failing to trigger

Currently, I am attempting to retrieve data from an API using Redux for state management. Despite trying to dispatch the action within the useEffect hook, it does not seem to be functioning properly. I suspect that the issue lies with the dependencies, but ...

Developing a personalized Avada form auto-scrolling algorithm

Our form, created using the Wordpress - Avada theme, needs an autoscroll feature. As users answer questions, the next question appears below, but this is not immediately visible on mobile devices. To address this, we require autoscroll functionality. The ...

Genvalidator: Validate forms by checking for checkbox selection

Currently, I am utilizing genvalidator to conduct tests on input fields within a form. One issue I am encountering is the inability to determine if a checkbox has been checked. Below are the settings for all fields: frmvalidator.addValidation("name","req ...

Increase the value of count (an AJAX variable) by 4 upon clicking the button, then send it over to the PHP script

I'm facing an issue where my AJAX variable is only updating once by +4 each time a button is pressed. I need assistance on how to make it continuously work. index.php - AJAX <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.m ...

Tips for revealing a position: absolute div that is currently hidden with display: none styling

Below is the code for a div element that I want to temporarily hide using JavaScript: <div id="mydiv" style="position: absolute; top: 60px; left:5px; right:25px; bottom:10px;"> </div> After hiding it with display:none in my ...

Printing to the console: the array is empty and contains just one element simultaneously

I've encountered an issue regarding the console.log function that seems related to a specific case I found... JavaScript array length problem Upon checking my console, I noticed this output: https://i.stack.imgur.com/AbCdE.png The code snippet in ...

Method to store JSON data into a file

Here is my code: def saveJSONget(site, code): response = requests.get(site) json_str = json.dumps(response.json()) if not response.status_code == code: file = open("PATH", 'w') file.write(str(respo ...

Tips for positioning divs on top of an image with Twitter Bootstrap

I'm having an issue with displaying an image and dividing it using bootstrap div columns. The problem is that the image is overlapping the divs, making it impossible to click or attach jQuery events to it. Here is the code I am currently using: #view ...

Exploring D3 to extract nested information and build an interactive navigation tree

Recently, I've been working with d3's zoom circle feature from here: The data I'm dealing with is structured as a json array with various levels of arrays and objects. object = { class: "show", name: "Game of Thrones", childre ...

Show categories that consist solely of images

I created a photo gallery with different categories. My goal is to only show the categories that have photos in them. Within my three categories - "new", "old", and "try" - only new and old actually contain images. The issue I'm facing is that all t ...

Guide to setting up a datePicker in a cellEditorSelector

In my grid, I want to have different editors for different rows within the same column. The ag-Grid documentation provides information on how to achieve this using colDef.cellEditorSelector as a function: link I have successfully created unique editors fo ...