Angular 4 - Error when displaying json data as a table

user3570620

Using Angular 4, Typescript I am unable to display content of below json:

  1. timed_out, max_score in a text box
  2. CV/JOB in a table.

    Any hints

    { "took": 56, "timed_out": false, "_shards": { "total": 18, "successful": 18, "failed": 0 }, "hits": { "total": 23381243, "max_score": 2.2639267, "hits": [ { "_index": "2018-09", "_type": "ABC", "_id": "122", "_score": 2.2639267, "fields": { "CV": [ "proc" ], "JOB": [ "pap" ] } }, { "_index": "2018-09", "_type": "ABC", "_id": "123", "_score": 2.2639267, "fields": { "CV": [ "foo" ], "JOB": [ "bnn" ] } } ] } }

Sajeetharan

You need nested ngFor in your case,

 <tr *ngFor="let dataobj of data.hits.hits">
   <td  *ngFor="let jobObj of dataobj.fields.JOB">               
      {{jobObj}}      
   </td >
   <td  *ngFor="let hitobj of dataobj.fields.CV">               
     {{hitobj}}      
    </td >            
</tr>

STACKBLITZ DEMO

Collected from the Internet

Please contact [email protected] to delete if infringement.

edited at
0

Comments

0 comments
Login to comment

Related

Displaying data from a JSON file with Angular

Angular Material Table not displaying data

Displaying JSON Data in Angular Component

Iterate JSON in a angular 4 table

Issues while displaying JSON data in table

Angular 4 - Displaying complex Json values

Error when a field is missing in Angular data table

Meteor: error when displaying data in template

OutOfMemory Error when displaying data from SQLiteDatabase

Angular Material table not displaying any data

JSON data not displaying in Vuetify v-data-table using Axios

Displaying Paginated Data in Mat-Table (Angular)

error: No database selected when displaying data on website

Displaying an array of data in to a table of 4 columns

Error when updating json data using http put in angular js?

Displaying JSON Data In <Select> Using AngularJS (Error)

Displaying json data in an Angular App

error when try to get data from json angular

Displaying Specific Data in Angular 2/4

Displaying appropriate error message when data from JSON doesn't get fetched in HTML

JSON parsing error, data not displaying

Error when displaying data in RichTextBox after clearing it

retrieve data from a table in a json feed Angular 4

Displaying JSON Data Using Angular 7

Displaying data for Dynamic Angular Material Table

Angular reactive form: Displaying error text when form has error

Not Displaying Data When Setting Value in Angular

Table not displaying data when changing page in Angular

PGAdmin 4 error: missing FROM-clause entry for table 'rel' when displaying table data in PostgreSQL 10, but not encountered with Adminer