Obtain a particular column from a JSON document using Angular 2

Currently, I am working on a project in Angular2 that requires the use of an online JSON file. I have utilized http.get to retrieve the file, but I only need the data from the second and third columns which contain the first name and last name.

If you want to view the JSON file, here is the link >

Below, you can find the code snippets I am using:

admin1.component.ts - where the dates are displayed

import { Component } from '@angular/core';
import { UserService } from '../services/user.service';

@Component({
moduleId: module.id,
selector: 'admin1',
templateUrl: `admin1.component.html`,
})
export class Admin1Component  {
enable: boolean;
_profile: {}

constructor(private userService: UserService) {
    this.enable = false;
}

loadUser() {
    this.userService.getUser().subscribe(data => this._profile = data);
    this.enable = true;
 }
}

my user.service.ts

import { Injectable } from '@angular/core';
import { Http, Response } from '@angular/http';
import 'rxjs/add/operator/map';

@Injectable()
export class UserService {
constructor (private http: Http) {}

 getUser() {
 return this.http.get('http://alexgr.ro/ehealth/patients.json')
  .map((res:Response) => res.json());
 }
}

and my admin1.component.html

<div>
<button (click)="loadUser()">Load User</button>
<div *ngIf="enable">
    {{ _profile | json }}
</div>

I would greatly appreciate any assistance with this issue

Answer №1

To iterate through the items, make use of ngFor,

<div>
<button (click)="loadUser()">Load User</button>
<div *ngIf="enable">
<ul>
    <li *ngFor="let pro of _profile ">
       <h1> {{ pro.first_name}} </h1>
       <h1> {{ pro.last_name}} </h1>
    </li>
  </ul>
</div>

Answer №2

To properly display the array, iterate over it using the following syntax:

<div *ngFor='let profile of _profile'>
    {{ profile.first_name }}     {{ profile.last_name }}
</div>

Avoid using the json pipe as it simply displays the entire data in its raw form on the DOM.

Answer №3

<div>
<button (click)="loadUser()">Load User</button>
<div *ngIf="enable">
<div *ngFor="let profile of _profile  "
    {{ profile | json }}
</div>

Furthermore, you have the option to utilize the Json pipe in conjunction with ngFor.

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

What steps should I take to mimic a website's JSON Request in my Android application?

Is it feasible to reproduce a JSON request from a website? For instance, if I wish to extract publicly available data from a website for my android application, can I utilize chrome's dev tools to analyze how the website requests the data and then mim ...

The PrimeNg confirmDialog is updating my navbar with some modifications

Despite my navbar working well and being fully responsive, I encountered an issue where opening a confirm dialog in the background caused the navbar width to expand to 800px even though the screen width was 1480px, creating empty space on the right side, a ...

Exploring the Function Scope within ViewModel

I have been facing an issue while trying to call a function from my ViewModel within a foreach loop. It seems like the function goes out of scope as soon as I call it. Being new to JavaScript, I am struggling to understand why this is happening. Here is t ...

Tips on managing ajaxStart and ajaxStop events the Angular2 way

I am seeking a way to trigger events similar to JQuery's ajaxStart and ajaxStop. While I found a partial solution on how to set default HTTP headers in Angular 2 here, I have managed to handle the ajaxStart event for now. Does anyone have any soluti ...

Guide on assigning a class to an array of JSON objects in TypeScript

If I have an array of JSON objects, how can I cast or assign the Report class to it? console.log('jsonBody ' + jsonBody); // Output: jsonBody [object Object],[object Object] console.log('jsonBody ' + JSON.stringify(jsonBody)); // Outpu ...

Use Javascript to display specific div elements by clicking a button

I could really use some assistance, When I attempt to display the select div by clicking the button, the "id" that PHP generates returns a null response in the console. The requirement is to only show the div when clicking on the "Quick Quote" button. Pro ...

Leveraging Selenium for testing Polymer components and shadow DOM structures

Having trouble using Selenium with elements inside a shadow DOM. Is there a specific method to handle this situation? Any guidance on what I might be doing wrong? Here are the various approaches I've attempted: var webdriver = require('selenium ...

Ways to sort through an array to find distinct values and sum up the repeated ones in PHP

The data is sourced from an API, so I have no control over it. Before obtaining this result, I used json_decode($response, true) - Array ( [0] => Array ( [status] => ok [res] => Array ...

Having trouble with your jQuery AJAX function not receiving the text returned from your PHP file?

After extensive searching, I have come across several individuals facing the same issue as me, but unfortunately, none of them seem to have found a solution. The problem at hand is that PHP is not providing any data to the AJAX function. When I try to dis ...

What method can I use in Javascript to extract the mealtype data from the Edamam nutritional API?

My goal is to extract the mealtype information from the API linked below. After reviewing the API, it seems that a POST request is required to retrieve mealType data. However, I am uncertain about the correct syntax for this request. For instance, if a u ...

How can I trigger a select tag change event in Jquery without any user interaction?

I'm currently facing a small hurdle. I have 3 cascading drop down lists, namely category, subcategory, and subsubcategory. The user picks a value from the category list, which then displays related values in the subcategory list. When the user changes ...

Setting `tabBarVisible` to false does not function properly within a stackNavigation nested element

Details on my project dependencies: "react-navigation": "^3.6.0", "expo": "^32.0.0" I'm working with a TabNavigator that contains redirections to child components, which are StackNavigators. However, I'm facing an issue where I am unable to hide ...

Malformed PHP Array Structure

I am facing an issue with formatting the results of my query in an array and then encoding it into JSON. I want the data to be structured like this: array[0] = project1, project2, project3; array[1] = item1, item2, item3; However, currently, my data ...

Nullify the unfulfilled fetch call

When a value is entered in the search bar on the webpage, it gets added to a URL and used to retrieve JSON data. Everything works smoothly, but if a value is inputted that the API doesn't have information for, a null response is returned. The questio ...

What are some reasons for the slow performance of AWS SQS?

My current project involves measuring the time it takes to send a message and receive it from an SQS queue. Surprisingly, the average time it takes is between 800-1200 ms, which seems like an excessively long period. Below is the code I have been using for ...

Sign up for notifications using NGRX

How can I incorporate CompanyEffects in my AppModule after receiving a response from the AppConfigService on the server? Effect registration within AppModule EffectsModule.forRoot([CompanyEffects]), CompanyEffects Implementation export class CompanyEff ...

The attribute 'prop' is not found on the type 'IntrinsicAttributes & TableProp'.ts(2322)

Encountering an error while trying to pass a prop to a React component for the first time. Despite looking at other posts for solutions, I have been unable to resolve it so far. Here is a snippet of my code: type TableProp = {}; function Table(prop: Tabl ...

The files uploaded through Strapi are not showing up on the website

My MongoDB database contains numerous files stored in the upload_file collection, each of which has relationships with related content types. Despite this, when I access the Strapi CMS UI, I am unable to see the file attached to its respective content type ...

Exploring Angular Testing: Unraveling Chained HTTP Requests with the Power of rxjs

I've been attempting to write unit tests for a function in my service that carries out a POST request followed by a GET request. I'm using switchMap to handle this, but running into an issue where the HttpTestingController match function isn&apos ...

Unable to associate with 'schedule' because it is not a recognized attribute of 'app-timetable'

Check out my student-profile.component.html: click here for image description Take a look at my timetable.component.ts: click here for image description Here is my student-profile.ts click here for image description Error Alert-> click here for image ...