Ways to display object data in a snackbar within an Angular application

I am currently working on a snackbar feature that receives notifications from a Web Service and displays whether the Job Execution was successful or failed.

To parse the JSON data, I have implemented the following code:

    this.messageService.messageReceived$.subscribe(data => {

        this.snakbar.statusBar("Platform job Completed - " + data, "Info");
        let webService: WebService = JSON.parse(data);
        console.log(webService.message);
        console.log(webService.executionId);
        console.log(webService.code);
        this.spinner.hide();
        this.selectedIndex = 1;
}

In order to properly parse the JSON data, I have created an Interface as follows:

interface WebService {
jobId: string,
executionId: string,
code: number,
message: string,
data: string
}

Although I can view the data in the console using console.log, I am facing an issue with displaying the message in the snackbar. Currently, I am getting 

'Platform job Completed - [Object][Object]'
, but I aim to display something like 
'Platform job Completed - Success/Failure Info"'
in the snackbar.

Any suggestions on how I can achieve this?

javascriptangulartypescriptangular-material

Answer №1

Start by assigning the subscribed value to a variable of your choice.

this.data = data;

Next, retrieve the message value from the assigned data.

this.snakbar.statusBar("Platform job Completed - " + this.data.message, "Info");

Complete Code

const project = JSON.parse(this.dataService.getObject("project"));
    if (project != null) {
        this.globalAppSateService.onMessage(project);
        this.project = project;
    }
    this.messageService.messageReceived$.subscribe(data => {
        this.data = data; // store data for later use
        this.snakbar.statusBar("Platform job Completed - " + this.data.message, "Info");
        let webService: WebService = JSON.parse(data);
        console.log(webService.message);
        console.log(webService.executionId);
        console.log(webService.code);
        this.spinner.hide();
        this.selectedIndex = 1;
}

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

I can't figure out why my SCSS isn't loading, even though I've added it to the webpack.mix.js file in my Laravel project that's set up with React.js

I'm facing a problem where my SCSS is not loading in the VideoBackground.js component of my Laravel project built with React.js, even though I have set it up correctly in the webpack.mix.js file. The file path for the videoBackground.scss file within ...

javascriptphpreactjslaraveldebugging

Select DOM Elements Using JavaScript CSS Queries

As I delved into JavaScript in an attempt to craft my personal slider, I stumbled upon a perplexing discovery. I encountered a CSS regulation that looked like this: html.js #slideshow .slides img { position: absolute; } The explanation suggested that ...

javascripthtmlcssslider

Assigning enum type variable using string in TypeScript

How can I dynamically assign a value to a TypeScript enum variable? Given: enum options { 'one' = 'one', 'two' = 'two', 'three' = 'three'} let selected = options.one I want to set the variable " ...

typescriptenums

Continue applying CSS edits even after reloading the page

I have successfully implemented the Cookie Yes plugin with wordpress, however, there is one final issue that I need help with. Our goal is to ensure that the banner always remains at the top of the page without overlapping the navigation bar. To achieve t ...

javascripthtmljquerycss

Tips for eliminating /?fbclid=... from a Nuxt URL

Hello, I am looking to remove the Facebook analytics forced URL parameter "?fbclid=" from my host URL. Specifically, I want to get rid of it when redirected from Facebook by clicking on a URL. The issue I'm encountering is that the nuxt-link-exact-act ...

javascriptfacebookvue.jsnuxt.js

The correct method for including a CSS file in a Vue.js application

How can external CSS files be properly added in a Vue.js Application? I have come across multiple methods for adding CSS files in a Vue.js Application. One suggestion is to use the following code: <link rel="stylesheet" type="text/css" href="/static/b ...

javascriptcssvue.js

unable to select date on mat-calendar

I'm trying to add special dates to a mat-calendar by highlighting them. Here's the code I have so far: app.component.ts: datesToHighlight = ["2019-06-22T18:30:00.000Z", "2019-06-06T18:30:00.000Z", "2019-06-24T18:30:00.000 ...

angular

Why am I encountering http://localhost:3000/api/auth/error?error=AccessDenied when implementing Google signin in my Next.js application?

Can someone please assist me in resolving an issue I am facing with my NextJs application using Google signin? Whenever I try to sign in, I get the error message "http://localhost:3000/api/auth/error?error=AccessDenied". Why is this happening? Here is a ...

javascriptreactjsnext.jsoauth-2.0next-auth

Adjusting the size of images with precision after downloading from Google Cloud Storage

Struggling to resize an image after retrieving it from Google Cloud Storage. The streaming process is successful, but resizing seems to be an issue. The goal is to pass the image object to the sharpjs resize function, which will then resize the image and r ...

javascriptnode.jsexpressgoogle-cloud-storagesharp

How to make a POST request using React's fetch function

I'm experiencing an issue with routing post requests. I'm trying to create a registration form and post the input data from the form to mongodb. I've set up the router and post route on the server side, and it works fine when I test it with ...

javascriptreactjsmongodbrestfetch-api

Show the values in the second dropdown menu according to the selection made in the first dropdown menu using Angular 8

My goal is to retrieve data and populate two dropdowns based on user selection. However, the code I've written isn't giving me the desired output and instead, errors are occurring. Being new to Angular, I would appreciate a review of my code. Her ...

angulartypescript

Execute a node script file at random intervals

I've been utilizing forever to maintain the continuous execution of a node script: forever start script1.js However, my requirement is to run these files in a random order... For instance: Execute node script1.js Execute node script2.js Run script ...

javascriptnode.jsnpm

Is it necessary to compile Jade templates only once?

I'm new to exploring jade in conjunction with express.js and I'm on a quest to fully understand jade. Here's my query: Express mentions caching jade in production - but how exactly does this process unfold? Given that the output is continge ...

javascriptnode.jsexpresspugproduction-environment

What is the method for assigning a different property type in a mongoose schema other than the one that is specified?

Looking for some advice on setting up a user profile schema in Mongoose for a forum. My goal is to have the user's forum title as an ObjectID referencing the Title schema. I have already established this part of the setup. However, my dilemma is that ...

javascriptnode.jsmongodbexpressmongoose-schema

Sorting an array of objects based on a combination of numbers and special characters

I'm currently facing an issue with sorting an array of objects based on the dimension property, which consists of number intervals and special characters. Here's a snippet of the data I have: let data = [ { "soldTickets": 206, "soldR ...

javascriptarrayssortingecmascript-6javascript-objects

Accessing the login page will not display the header, breadcrumb, or

I am currently utilizing the PrimeNG theme in conjunction with Angular. In order to create a login component containing a login form, I proceeded as follows: ng generate component login I then added the following to my app.routes.ts: import {Routes, Rou ...

angularangular6primeng

Having difficulty deleting a checkbox element using JavaScript

My goal is to have a feature where users can effortlessly add or remove checkbox div elements as needed. The code I have written successfully adds and resets checkboxes, but I am encountering an issue when trying to remove them. I am struggling to identif ...

javascriptjqueryhtml

Calculating different percentages from a reduced map containing JSON data

Forgive me in advance if there's a similar question out there, but after a day of searching, I couldn't find what I need. I'm calling an API that responds with data, and I've extracted the necessary details to create a JSON file with t ...

javascriptjsontypescriptjavascript-objects

How can I make sure that another function will only be executed after the completion of a function in

I'm currently working on an app with Angular CLI, and I am trying to retrieve a list after an insertion. Despite trying various methods such as observer, promise, async, setTimeout, etc., I haven't been able to find the right solution yet. I feel ...

angulartypescript

Tips for effectively adjusting lighting in a customized shader material

Presenting a demonstration showcasing the use of a height map in three.js coupled with custom shader(s). Everything appears to be functioning smoothly now. The working demo can be found on this link. Below are the shader scripts: <script id="vertexShad ...

javascriptthree.jsglsl