Tips for displaying the property of an array of objects in a template

I am currently trying to display the value of a property in my template, but nothing is appearing. Here is my component code:

export class ServerStatusComponent implements OnInit {
  snovieCollection: SnovietatusDto = {};

  constructor(private snovierStatus: snovieStatusService) {}

  ngOnInit(): void {
    this.sensorStatus
      .getSensorStatuses()
      .pipe(
        map((data) => {
        console.log(data.cameraSensors);
        })
      )
      .subscribe((status) => {      
      });
  }
}

This is how my template looks:

<p>Camera sensors</p>
  <tr *ngFor="let camera of snovieStatusCollection.key|keyvalue">

    test
     <h3> {{camera | json}}</h3>

  </tr>

I am simply trying to display the value of the key in the template. The console log shows this:

0: {key: "T", latestTimestamp: "2021-03-12T10:09:00Z"}

No errors are being shown, but the value is not displaying either.

Answer №1

Just a couple of things to note:

  1. Make sure to use tap instead of map if you are not returning any value from the operation.
  2. Don't forget to assign the response to this.sensorStatusCollection within the subscription block.
export class ServerStatusComponent implements OnInit {
  sensorStatusCollection: SensorStatusDto = {};

  constructor(private sensorStatus: SensorStatusService) {}

  ngOnInit(): void {
    this.sensorStatus
      .getSensorStatuses()
      .pipe(
        tap((data) => {                         // <-- Use `tap` here for side-effects
          console.log(data.cameraSensors);
        })
      )
      .subscribe((status) => {      
        this.sensorStatusCollection = status;   // <-- Make sure to assign the response here
      });
  }
}

Update: Type Revision

  1. @TotallyNewb mentioned in the comments that the type of this.sensorStatusCollection should be an array of type SensorStatusDto.
export class ServerStatusComponent implements OnInit {
sensorStatusCollection: SensorStatusDto[] = [];

...
}

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

Sending objects as parameters to a class in JavaScript - an easy guide

Having trouble passing a parameter to the class for handling AJAX errors. The initial function is as follows: function GetLastChangePass(UserId) { var field = { id: UserId, } var fieldStringified = JSON.stringify(field) $.ajax({ ...

Determining age in a Class upon instance creation

Is there a way to encapsulate the age calculation function within the Member Class without resorting to global space? I want to automatically calculate and set an age when creating an instance. Currently, I have a function that works, but I'm curious ...

Building a series of radio buttons using *ngFor [Angular2]

I am facing an issue with generating a dynamic number of radio buttons based on the length of an Array Of Objects (example: enum_details): Here is the code snippet I have attempted: <div *ngFor="let enum of enum_details"> <label for="enum_answ ...

Ensure that the code runs only once another method has completed its execution

My goal is to have a function called setSource perform an action that takes about 3 seconds to complete. editor.setSource(); setTimeout(function () { // Execute additional commands }, 3000); I need the section of code labeled "//do something, some c ...

I encountered an issue with the timeouts() and windows() methods where I received an error message stating "The method window() is undefined for the type WebDriver.Options"

Currently, I am utilizing the driver.manage().timeouts().implicitlyWait(120, TimeUnit.SECONDS); and driver.manage().window().maximize(); methods in my code. However, encountering an error with the timeouts() and window() functions. The error message states ...

A one-to-many relationship does not include the insertion of the parent item

My database has a one to many relationship. When I perform a select operation, everything works correctly. However, when trying to insert data, the insertion occurs in the main table, but updates are triggered in other tables. Error Log from Console [0] ...

Cassandra encountered a TypeError stating that the "value" argument is exceeding the bounds

I keep encountering the error message below. Any thoughts on what might be causing it? TypeError: "value" argument is out of bounds at checkInt (buffer.js:1041:11) at Buffer.writeInt32BE (buffer.js:1244:5) at Encoder.encodeInt (/ ...

When attempting to create a fresh NestJS module, a message pops up stating: "An error occurred while

Currently running MacOS Monterey with the M1 chip as my OS. I installed NestJS CLI using the command: sudo npm install -g @nestjs/cli When creating a new Nest project with nest new message, everything goes smoothly. However, when attempting to generate a ...

Animate the Bootstrap carousel from top to bottom instead of the traditional left to right movement

Is there an option available in the bootstrap carousel to animate it from top to bottom and bottom to top, rather than from right to left and left to right? jsFiddle link <div id="myCarousel" class="carousel slide" data-ride="carousel" data-interval=" ...

The Angular4 router.navigate function appears to be unresponsive and fails to perform any actions

I have implemented conditional navigation based on the customer's role in the system. Here is an example of how it works: this.GetQuickStartStatus() .subscribe(data => { if(data.isActive){ ...

Tips for delivering a 10mb+ file that is regularly updated to the client in increments

I am dealing with a crucial 10mb+ binary file that my client needs to function properly. The problem is, every time the client visits the site, this file increases in size. Let's say the client accesses the page 20 times in one day. Since the file cha ...

Unleash the power of jQuery to leverage two different input methods

Here is the code I'm working with: $('input[type="text"]').each(function(indx){ Right now, this code targets input elements with type "text". But how can I modify it to target both inputs with type "text" and "password"? Any suggestions o ...

Capturing the dynamic server response with nested JSON structures

I am in the process of creating a dynamic data-binding function named assemble that requires two input parameters: server response (JSON) - nested JSON object. instruction set (JSON) - a configuration object that dictates the binding. The Issue: The cur ...

Nativescript checkbox not displayed on screen

I've been attempting to incorporate the nativescript-checkbox plugin into my vue application. Unfortunately, the example provided by Vue is lacking in clarity. It does not specify whether or not to import the class into the component. Despite trying ...

Why is it important to have specific property names?

Here is some code and HTML for triggering a radio button. It seems to work fine without any issues, but I'm wondering if the presence of a name property is necessary. When I remove the name property, it stops working. Can someone explain why? <inp ...

JavaScript Variable Naming ConventionEnsuring correct spelling in variable names is essential

While I may not be a JavaScript expert, I have a question about its dynamically typed nature. We are all aware that JavaScript (node.js) is a dynamically typed language where we can easily assign values like: someObject.attr = 123; However, due to the la ...

What is causing my 'if' statement to only execute on the second trigger of the function?

By utilizing Node JS, Electron, and the FS module, I have developed a function in a separate .js file that is invoked in my HTML as a script and activated by a button with onclick="ReadSerials()". Interestingly, it consistently requires two butto ...

Creating a table in VueJs and populating it with values retrieved from an MSSQL database in a .NET Core web application

I am developing a table within a .NET Core Web Application that includes multiple rows and columns filled with data retrieved from a MSSQL server through a WEB API Given the need for numerous rows and columns, I am considering using a for loop inside my & ...

Tips for streamlining the filter function using replace and split:

Currently, I am utilizing a filter function alongside replace() and split(). Here is the code snippet: jQuery('table .abc').filter((i, el) => jQuery(el).text(jQuery(el).text().replace('a', 'b').split(' ')[0] + &ap ...

Unable to access global plugins in script tag when using Nuxt Vue with Typescript

Currently, I am in the process of converting a Nuxt Vue.js project (v2 not v3) into TypeScript, and I'm facing an issue where plugins are not recognized inside .vue files but work perfectly in .ts files. In the code snippets below, you can see that e ...