A guide on retrieving information from a JSON object using Typescript

Question

A guide on retrieving information from a JSON object using Typescript

When working with values retrieved from an API in JSON format, I encounter a challenge.

While I can view the object's values in the console, I struggle to assign them to individual variables.

Is there a way to separate and assign these values to different variables?

I aim to validate the data before passing it to the HTML for display.

IMG Values in the console

this.http
  .get(this.url + e)
  .map((res) => res.json())
  .subscribe((data) => this.user = data);

OR

getData() {
let e = md5(this.userString);
this.http
  .get(this.url + e)
  .map((res) => res.json())
  .subscribe(
  user => this.user = user,
  error => this.errorMessage = <any>)}

Thank You

json typescript angular2-services

Answer 1

Answer №1

Unfortunately, I am unable to leave comments, but it seems like the function is located in the html page. You need to call the function in a specific div and then retrieve the data with the desired information. For instance, in your scenario, it would look something like this:

<div click()= "getData()">
<p *ngFor="let i of data"> {{i.username}}
<p *ngFor="let i of data"> {{i.id}}

If the data were in an array, this setup would function correctly.
This is my interpretation of your question.

Answer 2

Unfortunately, I am unable to leave comments, but it seems like the function is located in the html page. You need to call the function in a specific div and then retrieve the data with the desired information. For instance, in your scenario, it would look something like this:

<div click()= "getData()">
<p *ngFor="let i of data"> {{i.username}}
<p *ngFor="let i of data"> {{i.id}}

If the data were in an array, this setup would function correctly.
This is my interpretation of your question.

A guide on retrieving information from a JSON object using Typescript

Answer №1

Similar questions

Successfully extracting partial JSON data from logs using Fluentd

Determine which rows have the checkbox enabled and showcase them in a separate table using Angular

C# - Swapping Characters with their Unicode Representation

Is it possible to determine if an HTML form has been modified?

"Restheart fails to provide a response when attempting to add content

Struggling to transfer information from a JSON document to a MYSQL database using PHP, however, it seems the data isn't aligning with the required format

Using Java to parse a JSON file

What is the best way to retrieve a value from async/await functions?

Fill the dropdown menu with JSON keys

Learn how to incorporate JSON data into your Wind Rose Polar Highchart rather than using traditional table data

What is preventing me from adding members to an imported declaration?

Testing a feature in Angular that modifies a variable

Is it possible to pass a different variable during the mouse down event when using Konva for 2D drawing?

"Adding a JSON Object to a JSON Array in Kotlin with Gson: A Step-by-Step

Asynchronous and nested onSnapshot function in Firestore with await and async functionality

Retrieve the quantity information from a JSON object

Utilize Tailwind CSS in React to dynamically highlight the active navigation item on click

Generate JSON output containing specific structures

Utilize Angular to initiate the transmission of attribute values upon a click event

Fixing JSON problem in Java EE 7 Webservices running on Wildfly