How to populate an html table from angular http get that returns an array of JSON

display json data in html table using angular 4
angular 4 dynamic table from json
how to fetch json data in angular
angular dynamic table
angular table example
save data in json file using angular 4
display json data in angularjs example
how to display json data in angular

I have a service that returns an array of JSON objects that I am attempting to load into an html table. The http get is returning data however the data will not load into the table. I suspect I may have an issue with the data types I am using in my typescript code. This code is logging no errors to the console.

If I comment out the data table and add a new line with {{ myData }} the page displays "function values() { [native code] }"

my-data.component.html

<div class="container-fluid">
  <div class="jumbotron text-center">
    <h1>
      My Data
    </h1>
  </div>
  <div>
    <app-loader [isLoading]="isLoading"></app-loader>
    <table class="table table-hover table-responsive" [hidden]="isLoading">
      <thead>
        <tr>
            <th scope="col" data-field="myData.fileName">File Name</th>
            <th scope="col" data-field="myData.index">Index</th>
        </tr>
      </thead>
    </table>
  </div>
</div>

my-data.component.ts

import { Component, OnInit } from '@angular/core';
import { finalize } from 'rxjs/operators';

import { MyService } from './my-service.service';

@Component({
  selector: 'app-my-data',
  templateUrl: './my-data.component.html',
  styleUrls: ['./my-data.component.scss']
})
export class MyComponent implements OnInit {
  myData: any;
  isLoading: boolean;

  constructor(private myService: MyService) {}

  ngOnInit() {
    this.isLoading = true;
    this.myService
      .getMyData()
      .pipe(
        finalize(() => {
          this.isLoading = false;
        })
      )
      .subscribe((myData: any) => {
        this.myData = myData;
      });
  }
}

my-data.service.ts

import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { Observable, of } from 'rxjs';
import { map, catchError } from 'rxjs/operators';

const routes = {
  dataEndpoint: 'http://localhost:53452/api/data'
};

@Injectable()
export class MyService {
  constructor(private httpClient: HttpClient) {}

  getMyData(): Observable<any> {
    return this.httpClient
      .cache()
      .get(routes.dataEndpoint)
      .pipe(
        map((body: any) => body.values),
        catchError(() => of('Error, could not load My Data'))
      );
  }
}

JSON Returned from get

[{"fileName":"sometext.txt", "index": 1},{"fileName":"sometext2.txt", "index": 2}]

I believe you are trying to display the data in the table body. Try this.

<div class="container-fluid">
  <div class="jumbotron text-center">
    <h1>
      My Data
    </h1>
  </div>
  <div>
    <app-loader [isLoading]="isLoading"></app-loader>
    <table class="table table-hover table-responsive" [hidden]="isLoading">
      <thead>
        <tr>
            <th scope="col">File Name</th>
            <th scope="col">Index</th>
        </tr>
      </thead>
      <tbody>
        <tr *ngFor="let file of myData">
            <td>{{file.fileName}}</td>
            <td>{{file.index}}</td>
        </tr>
      </tbody>
    </table>
  </div>
</div>

How to populate an html table from angular http get , I have a service that returns an array of JSON objects that I am attempting to load into an html table. The http get is returning data however the  Here Mudassar Ahmed Khan has explained with an example, how to use AngularJS ng-repeat directive to populate (bind) HTML Table from JSON array. First an array of JSON objects is generated and then it is used to populate (bind) HTML Table using the AngularJS ng-repeat directive. Download View Demo Download Free Files API

Your data is an array, so you have to use *ngFor, like this:

<div class="container-fluid">
  <div class="jumbotron text-center">
    <h1>
      My Data
    </h1>
  </div>
  <div>
    <app-loader [isLoading]="isLoading"></app-loader>
    <table class="table table-hover table-responsive" [hidden]="isLoading">
      <thead>
        <tr *ngFor="let data of myData">
            <th scope="col" data-field="data.fileName">File Name</th>
            <th scope="col" data-field="data.index">Index</th>
        </tr>
      </thead>
    </table>
  </div>
</div>

How to populate an html table from angular http get that returns , I have a service that returns an array of JSON objects that I am attempting to load into an html table. The http get is returning data however the data will not load  In this article, you’ll learn how to get JSON data from an API and display in HTML, in quick time without having to write a lot of code. You’ll display the JSON data in HTML by doing the following:

I had to update the service to fix the problem which involved adding an interface and changing body.values to body. See https://angular.io/guide/http#type-checking-the-response for more information.

Updated my-data.service.ts

import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { Observable, of } from 'rxjs';
import { map, catchError } from 'rxjs/operators';

const routes = {
  dataEndpoint: 'http://localhost:53452/api/data'
};

export interface MyDataContext {
  FileName: string;
  Index: number;
}

@Injectable()
export class MyService {
  constructor(private httpClient: HttpClient) {}

  getMyData(): Observable<MyDataContext> {
    return this.httpClient
      .cache()
      .get<MyDataContext>(routes.dataEndpoint)
      .pipe(
        map((body: any) => body),
        catchError(() => of('Error, could not load My Data'))
      );
  }
}

Read an External JSON file in Angular 4 and Convert Data to HTML , Using the Get() method of HttpClient class, you can easily open and read data from a JSON file. Here in this post, Related: How to Bind JSON array or data to an HTML table in AngularJS using ng-repeat arrBirds = data as string []; // FILL THE ARRAY WITH DATA. AngularJS File Upload using $http post and FormData. JSON or JavaScript Object Notation, as you know is a simple easy to understand data format. JSON is lightweight and language independent and that is why its commonly used with jQuery Ajax for transferring data. Here, in this article I’ll show you how to convert JSON data to an HTML table dynamically using JavaScript.

How to Bind JSON Array or Data to an HTML Table in AngularJS , Here, in this post I'll show you how to easily bind JSON data to an HTML table in from a JSON array and show the data in descending order using AngularJS ng​-repeat orderBy filter. Let's get on with our example. index) { return { joinDate: new Date(value), values: $scope.employees[value] } } ); } ]); </script> </html>. First thing div inside a tr is not allowed(not working also) - Check this into a : is it correct? So I have change format -

Observables Array Operations, http.get('http://jsonplaceholder.typicode.com/users/') Most importantly functions like filter return an Observable , as in Observables beget other Observables  This article will explain how to populate multiple CheckBoxes using ng-repeat directive and get its checked (selected) value in Controller on Button click. Related Post: How to Read an External JSON file in Angular 4 and Convert Data to HTML Table. The dump() needs the json file name in which the output has to be stored as an argument.

HTML DOM Table Object, Well organized and easy to understand Web building tutorials with lots of examples of how to use HTML, CSS, JavaScript, SQL, PHP, Python, Bootstrap, Java  The AngularJS ng-repeat directive will be used to populate (bind) HTML Table from JSON data (array). First the JSON data (array of JSON objects) is generated and then it is used to populate (bind) HTML Table using the AngularJS ng-repeat directive. Download View Demo Download Free Files API

Comments
  • This was helpful but the real problem was in the service.
  • This was helpful but the real problem was in the service.
  • does the service return this data? What does he really return?