Issues with the Array functionality causing unexpected results to be displayed

Within my Angular 4 application, I have an object named allAvailableProviders structured as such - with provider IDs 71 and 72, followed by timestamps in a 24-hour format.

71: {…}
  1514678400: […]
    0: 800
    1: 1300
  1515283200: […]
    0: 800
    1: 1300
  1515888000: […]
    0: 800
    1: 1300
72: {…}
  1514678400: […]
    0: 800
    1: 1300
  1515283200: […]
    0: 800
    1: 1300
  1515888000: […]
    0: 800
    1: 1300

I have created a function to extract this data into a new array:

1514678400: []
  800: []
   0: 71
   1: 72
  1300: []
   0: 71
   1: 73

The code to achieve this is as follows:

let allDates = [];
  for(let pid in this.allAvailableProviders)
  {
    for(let slotDate in this.allAvailableProviders[pid]){
      if(!Array.isArray(allDates[slotDate])){
        allDates[slotDate] = new Array();
      }
      for(let spots in this.allAvailableProviders[pid][slotDate]){
        if(!Array.isArray(allDates[slotDate][spots])){
          allDates[slotDate][spots] = new Array();
        }
        allDates[slotDate][spots].push(pid);
      }

    }
  }
  console.log(allDates)

However, the output on the console log appears to be different than expected:

Array [ <10 empty slots>, … ]

[…]
[0…99999999]
[100000000…199999999]
[200000000…299999999]
[300000000…399999999]
[400000000…499999999]
[500000000…599999999]
[600000000…699999999]
[700000000…799999999]

I am encountering issues with generating the desired output using JavaScript and TypeScript, unlike when utilizing jQuery. Are there any suggestions on how to resolve this discrepancy?

javascriptarraysangulartypescript

Answer №1

After manually compiling your code, it appears as follows:

for(let pid in this.allAvailableProviders)

The correct syntax should be:

for(let pid of this.allAvailableProviders)

When working with arrays in JavaScript/TypeScript, the for-of loop is used for iterating through items, while the for-in loop is used to iterate over keys (such as index in an array)...

var arr = ['A', 'B', 'C', 'D'];

// Outputs: 0, 1, 2, 3
for (let item in arr) {
    console.log(item);
}

// Outputs: A, B, C, D
for (let item of arr) {
    console.log(item);
}

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

Concealing applicationId and clientToken in Datadog

I'm currently using an Angular application and I've integrated it with the Datadog application to utilize Session and Replay (RUM). However, I am concerned about the security of my sensitive information such as applicationId and clientToken. Is t ...

javascriptangulartypescriptdatadog

The pathway of information within an AngularJS modal window

Recently, I developed a small demo to demonstrate how to open a modal window in Angular using a directive as the template. However, I have some doubts about the way I am passing data and functions to the modal. Here is the code snippet from the opening c ...

javascriptangularjsangular-ui-bootstrap

Receiving the [object HTMLInputElement] on the screen rather than a numerical value

I have an input box where a user can enter a number. When they click a button, I want that number to be displayed on the page. However, instead of seeing the number, I am getting the output as [object HTMLInputElement]. Below is my TypeScript code: let qu ...

javascripthtmltypescriptfunction

The issue of AJAX not being triggered a second time when a button is clicked using a jQuery click event

Whenever I click the button, an AJAX call is triggered to submit a form. The first click works fine and displays an error message if needed. But when I try clicking the button again, the AJAX call doesn't happen. However, if I replace the AJAX call wi ...

javascriptjqueryajax

Error: TypeScript cannot locate the specified <element> in the VSCode template

After conducting some observations, I've come to realize that the error is specific to the first .tsx file opened in VSCode. Once IntelliSense runs on this initial file, the error appears. Subsequent files work fine without any issues. To troubleshoo ...

reactjsnode.jstypescriptvisual-studio-codereact-typescript

Real-time changes may not be instantly reflected in the model update

I need to add two numbers together and display the sum in a third input field: HTML <div ng-app="myApp"> <div ng-controller="MainCtrl as mainCtrl"> Main {{mainCtrl.foo}} <br/> <input type="text" ng-model="mainCtrl.foo"/> ...

javascriptangularjs

Subscribing with multiple parameters in RxJS

I am facing a dilemma with two observables that I need to combine and use in subscribe, where I want the flexibility to either use both arguments or only one. I have experimented with .ForkJoin, .merge, .concat but haven't been able to achieve the des ...

javascriptangulartypescriptrxjs

Apply rounded corners to the table row

Currently, I am utilizing a datagrid to display information. I have been attempting to implement border radius on all the table rows, but it doesn't seem to be working. Does anyone have insight into how I can apply border-radius to all rows in the t ...

cssangulartypescriptdevextremedevextreme-angular

In VueJS and Quasar, what is the best way to retrieve the clicked item in order to pass it to the API?

Utilizing a codepen sample with local data, I am hoping it will work for troubleshooting purposes. However, in reality, I am using vuex and an API endpoint to source the data. Unfortunately, I cannot share the API details. The core functionality involves ...

javascriptvue.jsvuejs2quasar-framework

Highchart: precise positioning of ticks on axis

Is there a way to precisely determine the distance or establish an exact distance (in pixels) between two ticks on the x-axis using Highchart? I attempted to use tickPixelInterval, but it doesn't appear to accurately set the distance between two tick ...

javascriptjqueryhighcharts

Refresh my EJS template dynamically following an AJAX call to Node.js without the need to reload the entire page

After implementing a shopping cart with a quantity field and a plus button for users to increase the quantity, I needed a way to update the DOM dynamically without reloading the entire page. This led me to discover AJAX requests recently, and I was able ...

javascriptnode.jsajaxejs

Separating screens for logged in and logged out users in React Router with Firebase is not possible

I'm currently developing an application using React and Firebase. The app has a requirement for user authentication to access their own timeline. To achieve this, I have decided to split the app into LoggedIn screens and LoggedOut screens. In the App ...

javascriptreactjsfirebase

Extracting information from a child select element within a parent component with ReactJS

My child component includes a select form element that queries my API to populate a select box with the data. I am trying to pass the selected option back to the parent component using an OnChange function, so that I can send the data back to the server. H ...

javascriptreactjs

How can I effectively monitor and track modifications to a document's properties in MongoDB?

I'm wondering how to effectively track the values of a document in MongoDB. This involves a MongoDB Database with a Node and Express backend. For example, let's say there is a document within the Patients collection: { "_id": "4k2lK49938d ...

javascriptnode.jsreactjsmongodbbackend

What is the best way to transfer a variable from an iframe to its parent window?

My colorbox parent page includes a TabContainer with various iFrames, and in the case of the second tab, a change is made to the database that requires updating a textbox on the parent window. ...

javascriptc#asp.netiframecolorbox

JavaScript Array Multiplication Theory

I am working with 2 arrays list1 = ["x","y"] list2 = [ ["5","6","7"],["20","21","22"]] My goal is to create an array of objects like this: [ {list1: x , list2: 5}, {list1: x , list2: 6}, {list1: x , list2: 7}, {list1: y , list2: 20}, {list1: y , l ...

javascriptarraysreactjsecmascript-6javascript-objects

Error in TypeScript React: "Could not locate module: Unable to locate 'styled-components'"

Even though I have installed the @types/styled-components package and compiled my Typescript React app, I am consistently encountering this error: Module not found: Can't resolve 'styled-components' I have double-checked that 'style ...

reactjstypescriptnpmstyled-components

Do you have any suggestions on how to send "iframe.contents()" to a PHP Script via Ajax?

I'm currently facing an issue in my code where I have an iFrame loading dynamic content, similar to a webpage (B.html) inside another page (A.php). On "A.php", users can edit the content of "B.html" inline. However, after the editing process is comple ...

phpjavascripthtmlajaxjson

Issue: The module 'ɵCssKeyframesDriver' is missing in the 'browser' file of '@angular/animations'

When I updated my Angular from version 12.0.2 to 13.0.3, everything was functioning properly. In an effort to declutter, I removed some unused packages like jquery, and a few others that slip my mind. Subsequently, I deleted node_modules, package-lock.json ...

angularangular-animations

Exploring the use of global variables in React

Welcome to my React learning journey! I've encountered an issue while trying to access a global variable exposed by a browser extension that I'm using. Initially, I attempted to check for the availability of the variable in the componentDidMount ...

javascriptreactjstypescript