The mysterious case of the disappearing items: why does Firebug show a blank array of objects in JavaScript and AngularJS?

Here is a problem that I am facing with JavaScript and cannot seem to figure it out from the screenshot below.

The issue I'm encountering is that when checking the array in firebug, it appears to be blank with a length of 0. However, if I click on the (+) icon, the data suddenly shows up. Can someone please assist me in identifying where I may have gone wrong with my code?

Snippet of Code Provided:

//scope.days is an array of objects
var newArr = [];
var myArr = [];
myArr = scope.days;
console.log(myArr.length);
var weekNum = 1;
newArr['week'+weekNum] = [];
for(var i=1; i<= myArr.length; i++) {
    newArr['week'+weekNum].push(myArr[i]);
    if(i%7 == 0){
        weekNum = weekNum + 1;
        newArr['week'+weekNum] = [];
    }
}
scope.days = newArr;

Attached Firebug Screenshot Below:

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

javascriptarraysangularjsfirebug

Answer №1

Understanding that objects can be accessed using bracket or dot notation is important. It's also worth noting that Arrays are considered objects as well.

For example, a property myProp within myObj can be accessed using either myObj["myProp"] or myObj.myProp. Bracket notation comes in handy when we need to access a property dynamically without knowing its identifier during design time. For instance, if we want to use a label that is created dynamically:

var label = "myProp";
myObj[label] = "xyz";

The main concept here is that square bracket notation is used to reference an object's properties. In the provided code snippet, this line is observed:

newArr['week'+weekNum] = [];

It appears that the intention is to utilize 'week'+weekNum as an index for the array, but in reality, it is performing a property assignment. As a result, continuously creating 'week'+weekNum will not add elements to the array because new properties are being generated instead.

To achieve the desired outcome, simply use:

newArr[weekNum] = [];

Answer №2

An Array starts at index 0 and goes up from there. In this case, your array is empty but still has properties.

It seems like you're treating it more like an Object. If you were to define it as such (newArr = { }), Firebug would be able to display it more accurately.

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

Initiating an Ajax POST request by clicking a button

I have a button on my webpage that, when clicked, currently prints the value of an element to the console using a basic function. Instead of just printing the value, I want to update my Django view by sending it through a POST request. Here's the cu ...

javascriptjqueryajax

Encountering an error stating that a JSON array cannot be transformed into a JSON object

I need to send a JSON array to a web server. The JSON array is created from an array list and there is a helper class that sends the JSON object to the server. My goal is to convert the JSON array to a JSON object. I attempted the following: public clas ...

phparraysjson

There is a random section that keeps crashing on the website

I have encountered a bug on my one-page Bootstrap template website. One of the sections is causing issues after multiple page refreshes. Despite checking the console for errors, I am unable to identify the source of the problem. Here is the HTML code for ...

javascripthtmltwitter-bootstrap

Numerous XMLHttp requests causing JSON data to be overwritten

I am facing an issue where my JSON data is being overwritten by the result of the last XMLHttpRequest made for each country. Is there a way to prevent this from happening? Below is the code snippet in question: function getDataBetween() { for (var i = ...

javascriptjsonxmlhttprequest

Can you explain the meanings of <div class="masthead pdng-stn1"> and <div class="phone-box wrap push" id="home"> in more detail?

While working on styling my web pages with CSS and Bootstrap, I came across a few classes like "masthead pdng-stn1" and "phone-box" in the code. Despite searching through the bootstrap.css file and all other CSS files in my folders, I couldn't find a ...

javascriptcss

The print preview displays a single div in an incorrect location

I have successfully created a javascript plot and wanted to incorporate a legend that overlaps the plot. Unfortunately, the function I used does not support directly overlapping legends, but it does allow for placing the legend in a separate div. To work a ...

javascripthtmlcss

Is there a way to send an array of objects as parameters in JavaScript?

I have an array of objects with the same key name. My goal is to pass each address key inside those objects as a parameter to my API. How can I achieve this? The response I receive looks something like this: { '0': { address: 'abcd' }, ...

javascriptnode.js

Errors encountered by the Chrome extension

Hey there, I've recently delved into creating a chrome extension but hit a roadblock. My issue revolves around the service worker registration failing and encountering errors related to undefined properties. https://i.stack.imgur.com/bGzB4.png The c ...

javascriptgoogle-chromegoogle-chrome-extension

Two servers, each with its own designated form, and a singular database

Hello, I'm managing two servers. One of them has a form and MySQL database where I input data. The other server only includes a form where I want the data filled in to be sent securely to the first server's database. What is the best method for i ...

javascriptphphtmljsonajax

Asynchronous POST request in Chrome Extension's popup.js

Apologies for asking again, but has anyone encountered a similar issue? I have a popup.js file with a login form that sends a request to an API to retrieve an API key for user authentication. When I set the request as synchronous (async: false), everythin ...

javascriptjqueryajaxasynchronousgoogle-chrome-extension

Error: Failed to retrieve the name property of an undefined value within the Array.forEach method

Upon pressing the button to display the task pane, I encountered an error message in the console window that reads: "Uncaught (in promise) TypeError: Cannot read property 'name' of undefined". This error persists and I am unable to resolve or com ...

javascripttypescriptoffice-jsoffice-addins

Tips on resolving the error message 'Cannot access the property 'document' of null' that occurs when attempting to access window.opener.document

My challenge lies in accessing elements in the parent window from a popup, as I keep encountering an error message that reads 'Cannot read property 'document' of null' whenever I attempt to do so. Despite reading several posts on this ...

javascriptwindow

achieving outcomes beyond iframe boundaries

I currently have an IFRAME that is responsible for loading my login page. Here is the code: <iframe src="loginForm.html"></iframe> Once the form in the IFRAME is submitted, I am looking for a way to retrieve and display the results on the p ...

javascriptphphtmlcss

Tips on removing previously selected files from a Bootstrap 4 input file

I am currently facing an issue with a form that includes an input file implemented using Bootstrap 4. The functionality of this input file depends on Javascript: when the user clicks on the "browse files" button, a window opens for file selection, and upon ...

javascripthtmlbootstrap-4bootstrap-file-input

What is the most effective method for storing an object in React?

I am facing an issue with storing my Object of my Checkout-Cart in a React Variable. I attempted to use the useState Component, but unfortunately, it did not work. Here is the object that I receive from my NodeJs Backend : [ { product_uuid: '3b ...

javascriptnode.jsreactjs

Transmit and exchange events between two JavaScript files within a node.js environment

Having some trouble getting EventEmitter to work in both directions between two Javascript files. In my server.js file: let api = require('./api') // Not working api.on("yo", data => { console.log(data) }) // Working api.emit("ready", "S ...

javascriptnode.jseventemitter

Craft a dynamic countdown timer that blinks using CSS

I am attempting to design a blinking countdown timer that starts at 5 seconds and disappears when it reaches 0. CSS: .blinky { transition: 1s opacity; -moz-transition: 1s opacity; -webkit-transition: 1s opacity; } HTML: <div id="count ...

javascriptcss

Adjusting the dimensions of the central container

Does anyone have suggestions on how to resize the middle red container when the window is resized, considering the fixed-width black containers on the left and right? I am aware that this can be achieved using jQuery by calculating the window width and a ...

javascriptcssangularjs

When utilizing a Slick carousel with three slides and setting autoPlay to true, the slider-nav behaves as if there are five slides

I am currently using the Slick carousel plugin and I want to feature a display of 3 photos. The issue is that when I set slidesToShow=2, everything works perfectly fine, but when I try to set slidesToShow=3, which equals the total number of slides, the bot ...

javascripthtmlcsscarouselslick.js

Having trouble rendering a model using OBJLoader in React Three Fiber

I'm having issues with rendering an .obj file in my React project using the OBJLoader and useLoader() hook from React Three Fiber. Despite ensuring that my file path is correct and wrapping the Model component in Suspense tags, I am still encountering ...

javascriptreactjsthree.js3dreact-three-fiber