"Extracting key-value pairs from an observable in Angular 2: A step-by-step

Trying to display the key/value pairs from the server in Angular using RxJS.

Below is the code snippet:

  
let listener = c.listenFor('addMessage');
  listener.subscribe(mesg => {

          console.log(mesg);

  });

However, it currently only prints the keys:

FIELD_NAME

KVD_VRT

What I want to achieve is:

FIELD_NAME:9.02798989742435

KVD_VRT:2.96959280174672

My JavaScript code is working fine, but I am not sure how to achieve the same thing in Angular:

        
chat.client.addMessage = function (name, message) {
            // Html encode display name and message.
            var encodedName = $('111').text(name).html();
            var encodedMsg = $('<div >').text(message).html();
            // Add the message to the page.
            $('#discussion').append('<li><strong>' + encodedName
                + '</strong>:&nbsp;&nbsp;' + encodedMsg + '</li>');
        };

I am uncertain how Angular handles subscribing to key/value data.

Any assistance would be greatly appreciated.

Answer №1

If Your message is considered an Object.

Have you attempted

let observer = c.listenFor('addMessage');
observer.subscribe(message => {
console.log(message.entires());

});

Typically

Object.entries() 

will give a Key,Value Pairs array for each entry in an array

if you want to show the corresponding value to your key, then in your Component.html file include

<tr *ngFor=" let message of mesg">
     <td>{{message.FIELD_NAME}} </td>
     <td> {{message.KVD_VRT}} </td> 
      </tr>

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

Elements powered by jQuery failing to load upon dynamic webpage(s) loading via ajax

Dynamic loading of jQuery elements, such as Ibuttons, seems to be causing issues when implemented with an ajax dynamic content loader. The entirety of my website is rendered through Ajax just like this: <html> <header> {jQuery} </header> ...

Enhancing Connectivity Through Fastify and Fastify-HTTP-Proxy Integration

I'm currently utilizing fastify along with fastify-http-proxy on a VPS running Ubuntu 19.x that is equipped with three unique IPv4 addresses. I have confirmed the functionality of these IP addresses by testing them using the following example IPs: cur ...

Encountering a problem with vis js events

While constructing a timeline in my vue.js application, I opted to utilize vis.js. Unfortunately, I encountered some issues when attempting to incorporate events. Initially, setting @drop="myDropCallback()" did not trigger the function upon dropping an ite ...

An error was encountered: An identifier that was not expected was found within the AJAX call back function

I am experiencing an issue while attempting to query an API. An Uncaught SyntaxError: Unexpected identifier is being thrown on the success part of my JQuery Ajax function. $(document).ready(function(){ $('#submitYear').click(function(){ let year ...

Sending information from the AppComponent to another component that is loaded at a separate time

Is there a way for me to maximize efficiency when fetching data from a service in the AppComponent and then passing it on to another component that's loaded later? I'd like to minimize API calls by reusing the same data in multiple places. How ca ...

What is the reason for the error that Express-handlebars is showing, stating that the engine

I recently added express-handlebars to my project and attempted the following setup: const express = require("express"); const exphbs = require('express-handlebars'); const app = express(); app.engine('.hbs', engine({defaultL ...

Does Angular send one request to the api periodically?

I'm working with an Angular directive and services that control the visibility of elements in a component based on API responses. When a user has permission to view a specific element, it is displayed; otherwise, it is hidden. I'd like to limit t ...

An example of using the index as an attribute within the same tag in Angular 2 *ng

Currently, I am in the process of creating a bootstrap carousel. To accomplish this, I have utilized *ngFor to add elements and carousel-indicators (small circles that show the current position). <li data-target="#myCarousel" *ngFor="#item of items; #i ...

Remove the image by clicking on the "X" icon located on the top right corner of the image

One of my tasks involves deleting an image by clicking on the "X" mark located at the top right corner of the image. To achieve this, I referred to this CSS fiddle http://jsfiddle.net/yHNEv/. Sample HTML code: <div class="img-wrap"> <span ng-c ...

Tips for showcasing a restricted amount of data with Angular.js

I've been exploring different ways to limit the results using limitTo, but unfortunately, I'm encountering unexpected issues. Currently, the entire list is being displayed when I only want to show 8 key-value items in a 4/4 block format. You can ...

Utilize a standard PHP script for every subdirectory within a domain

I'm currently working on a website and the design I'm using involves changing the URL in the address bar using the history API when the page content changes through JavaScript and AJAX. However, I also want each "page" of the website to be access ...

Angular sub-route is failing to activate

My current setup involves Angular routing along with the use of ngx-translate-router, and I've encountered an unusual issue with child routes. It's unclear whether this problem is connected to the translated router module I'm utilizing, but ...

Sleek descending motion effect

I have created a simple function, but it is not animating smoothly and seems to lag... I am using it for a div sized at 1600x700 pixels on page load $(document).ready(function(){ $('#slider').slideDown(500); }); Is there any way to ensure s ...

Implementing setInterval() leads to the dynamic alteration of images

I've created Marquees using CSS animations and a countdown timer. The Marquees display 100 random images that move from left to right and right to left. However, when the countdown timer decreases, the images in the Marquee change but the scrolling co ...

What are the steps to effectively utilize an interface within a TypeScript file that contains its own internal import?

Currently, I am in the process of developing a React JavaScript project using WebStorm and attempting to enable type hinting for our IDEs (including VS Code) by utilizing TypeScript interfaces and JSDoc annotations. Our goal is to potentially transition to ...

Can you create reusable components in Wordpress that are encapsulated?

In my quest to explore innovative approaches to Wordpress theme development, I have stumbled upon a variety of options such as the "Roots Sage" starter theme, the "Themosis Framework," and "Flynt." While these solutions address intriguing problems, they do ...

Loading local JSON data using Select2 with multiple keys can greatly enhance the functionality

Comparing the select2 examples, it is evident that the "loading remote data" example contains more information in the response json compared to the "loading array data" example. I am interested in knowing if it is feasible to load a local json file with a ...

The external typing file encounters an issue when trying to locate the relative path to its own index.d.ts file

While working on my project and using react-color as a dependency, I encountered an issue with the tsc import failing. The error message displayed: node_modules/@types/react-color/lib/components/sketch/Sketch.d.ts(2,41): error TS2307: Cannot find module & ...

Tips for effectively injecting retrieved API response data into a Table

Creating a google-map with customized markers that are logos of companies is the goal. Obtaining a json file from the APIs containing the vessels of interest has been successful. The challenge faced is injecting these vessels into a table on the user inte ...

Loading a different webpage seamlessly without having to reload the current one

Here is a snippet of my code in okay.html: {% extends "sch/base.html" %} {% load staticfiles %} {% block content %} <div class="row" id="ada"> <form action="" method="post> {% csrf_token %} <div align="center" class="cont ...