Angular: Indexed Array not binding properly

Question

Angular: Indexed Array not binding properly

I have decided to utilize the following data structure:

let availabilities = [
  "2019-7-15" : {id: 1, ...},
  "2019-7-16" : {id: 2, ...},
  "2019-7-20" : {id: 3, ...}
]

However, when trying to bind it in the template, it doesn't seem to work as expected. It appears empty even though I have tested it with the following code:

{{availabilities.length}} // result: 0
{{availabilities | json}} // result: []
// ngFor directive not displaying any data.

I'm curious about this behavior and wondering what data structure would be more suitable for this scenario (such as an indexed Array of objects).

javascript angular typescript angular8

Answer 1

Answer №1

If you are working with an associative array, one way to bind it is by using Object.keys. Here's an example:

// In your typescript file, define a property for Object.keys
objectKeys = Object.keys;

// In your HTML file, use objectKeys for binding
<ng-container ngFor="let key of objectKeys(arrayName)">
   <tr>
      <td>{{ arrayName[key].propertyName1 }}</td>
      <td>{{ arrayName[key].propertyName2 }}</td>
      ...
   </tr>
</ng-container>

Hope this explanation is helpful!

Answer 2

If you are working with an associative array, one way to bind it is by using Object.keys. Here's an example:

// In your typescript file, define a property for Object.keys
objectKeys = Object.keys;

// In your HTML file, use objectKeys for binding
<ng-container ngFor="let key of objectKeys(arrayName)">
   <tr>
      <td>{{ arrayName[key].propertyName1 }}</td>
      <td>{{ arrayName[key].propertyName2 }}</td>
      ...
   </tr>
</ng-container>

Hope this explanation is helpful!

Answer 3

Answer №2

Correct the typo by changing disponibilites.length to disponibilities.length.

The data structure

let disponibilities = ["2019-7-15" : {id: 1, ...},...]

is incorrect (not an array or object). Please use:

let disponibilities = {"2019-7-15" : {id: 1, ...},...}

instead.

Replace disponibilites.length with
```
Object.keys(disponibilites).length
```
.

Answer 4

Correct the typo by changing disponibilites.length to disponibilities.length.

The data structure

let disponibilities = ["2019-7-15" : {id: 1, ...},...]

is incorrect (not an array or object). Please use:

let disponibilities = {"2019-7-15" : {id: 1, ...},...}

instead.

Replace disponibilites.length with
```
Object.keys(disponibilites).length
```
.

Answer 5

Answer №3

This could be the solution you are seeking:

availabilities = {
  "2019-7-15" : {id: 1, ...},
  "2019-7-16" : {id: 2, ...},
  "2019-7-20" : {id: 3, ...}
}

If you want to dynamically set the date key using a variable with ES6 ComputedPropertyName:

let date1 = "2019-7-15";
availabilities = {
  [date1] : {id: 1, ...},
  "2019-7-16" : {id: 2, ...},
  "2019-7-20" : {id: 3, ...}
}

Make sure to declare your array properly for Angular binding either without let or using this:

To iterate over it in the template, ensure Object.keys is accessible:

@Component({
  selector: 'app-myview',
  template: `<div *ngFor="let key of objectKeys(availabilities)">{{key + ' : ' + availabilities[key]}}</div>`
})

export class MyComponent {
  objectKeys = Object.keys;

  availabilities = {
    "2019-7-15" : {id: 1, ...},
    "2019-7-16" : {id: 2, ...},
    "2019-7-20" : {id: 3, ...}
  }

  constructor(){}
}

Answer 6

This could be the solution you are seeking:

availabilities = {
  "2019-7-15" : {id: 1, ...},
  "2019-7-16" : {id: 2, ...},
  "2019-7-20" : {id: 3, ...}
}

If you want to dynamically set the date key using a variable with ES6 ComputedPropertyName:

let date1 = "2019-7-15";
availabilities = {
  [date1] : {id: 1, ...},
  "2019-7-16" : {id: 2, ...},
  "2019-7-20" : {id: 3, ...}
}

Make sure to declare your array properly for Angular binding either without let or using this:

To iterate over it in the template, ensure Object.keys is accessible:

@Component({
  selector: 'app-myview',
  template: `<div *ngFor="let key of objectKeys(availabilities)">{{key + ' : ' + availabilities[key]}}</div>`
})

export class MyComponent {
  objectKeys = Object.keys;

  availabilities = {
    "2019-7-15" : {id: 1, ...},
    "2019-7-16" : {id: 2, ...},
    "2019-7-20" : {id: 3, ...}
  }

  constructor(){}
}

Answer 7

Answer №4

Unfortunately, this data structure may not be the most efficient as it does not allow easy access to objects by keys in JavaScript. Consider using the following alternative approach:

let disponibilities = [
  { date: "2019-7-15", id: 1, ...},
  { date: "2019-7-16", id: 2, ...},
  { date: "2019-7-20", id: 3, ...},
]

Answer 8

Unfortunately, this data structure may not be the most efficient as it does not allow easy access to objects by keys in JavaScript. Consider using the following alternative approach:

let disponibilities = [
  { date: "2019-7-15", id: 1, ...},
  { date: "2019-7-16", id: 2, ...},
  { date: "2019-7-20", id: 3, ...},
]

Angular: Indexed Array not binding properly

Answer №1

Answer №2

Answer №3

Answer №4

Similar questions

implementing a like button next to every item on a list using ajax

Error: module not found in yarn

Sketch the borders of the element (animated)

How to build a customizable independent (No dependencies) service using Angular 15?

Having trouble getting your Bootstrap v4 carousel to function properly?

Unable to access the newly created object's properties following the instantiation of a new resource in AngularJS

Troubleshooting Ag Grid's Column Filter Refresh Problem

Any new techniques for generating HTML content dynamically?

Naming JavaScript properties based on array values

Having trouble updating the input value in AngularJS?

User IDs should not be shown on the jQuery datatable, although they are still accessible

What are the downsides of using PHP redirects instead of JavaScript redirects, given that most large websites opt for the latter?

Implement a recursive approach to dynamically generate React components on-the-fly based on a JSON input

Sending all received parameters in a single request in Grails

Javascript: Issue encountered while the page was loading

Guide to utilizing Angular-charts efficiently

What is the best way to verify the existence of an email address?

Ways to attribute a numeric worth to a choice in a JavaScript form

Pre-loading custom fonts in Next.js for a smoother user experience

Is there a way for me to retrieve the variable from one function and use it in another