Encountering an Issue in Angular 4 When Trying to Present JSON Data in a Table

Having trouble displaying the content of the JSON below using Angular 4 and Typescript:

  1. Display timed_out and max_score in a text box

  2. Display CV/JOB in a table.

    Any suggestions?

    { "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" ] } } ] } }

jsonangulartypescript

Answer №1

To handle this scenario, you should utilize nested ngFor.

 <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>

Check out this StackBlitz demo

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

Updating the log file location for electron-log in an Angular application integrated with Electron

I am currently developing a project using Angular 6 integrated with Electron. I have managed to successfully incorporate the electron-log library using ngx-electron. As a result, my application is functioning well and logging data to the default path: C:&b ...

angularloggingpathelectron

Ways to invoke external jQuery functions within Angular applications

In the midst of working on an Angular CLI Project, I find myself needing to incorporate some jQuery functionalities. To accomplish this task, I have added the necessary JavaScript files in the angular.json configuration: "scripts": [ "node_modules/jq ...

javascriptjqueryangularangular5

The API Key containing a colon is causing a TypeError when trying to parse it because forEach is not recognized as a function

Trying to utilize the New York Times API to fetch the Top Stories in JSON, I am encountering an issue: Uncaught TypeError: top.forEach is not a function Suspecting that the problem lies with the API key containing colons in the URL, I attempted encoding ...

javascriptjqueryjsonapiurl

Using Node.js to write data to a JSON file

Currently, I am working on a program that scans through an array containing numerous links. It reads through each link, extracts specific text, and then stores it in an output file as JSON. However, I am facing an issue with formatting the JSON file. The ...

javascriptjsonnode.jsweb

JavaScript's Blob to Base64 conversion using FileReader is failing to produce any output

In my typescript application, I am utilizing the FileReader to convert a blob into a base64 image for display within the template. adaptResultToBase64(res: Blob): string { let imageToDisplay : string | ArrayBuffer | null = ''; const re ...

javascripttypescriptasynchronousbase64filereader

The generic type does not narrow correctly when using extends union

I'm working with the isResult function below: export function isResult< R extends CustomResult<string, Record<string, any>[]>, K extends R[typeof _type] >(result: R, type: K): result is Extract<R, { [_type]: K }> { ...

typescript

Tips for obtaining a variable step size in react-chartjs-2

I am currently utilizing Chart.js in typescript to create graphical charts. My objective is to dynamically adjust weight values while maintaining a specified minimum and maximum. Specifically, I aim to display 5 ticks on the Y-axis regardless of the incomi ...

javascriptreactjstypescriptchartsreact-chartjs

Differences Between NgModule and AppComponent in Angular

Being a novice in the realm of Angular, I'm curious to know the distinction between CommonModule and BrowserModule, and when one should be prioritized over the other. ...

angularangular5

Encountering a 'ng serve' error while trying to include a new SCSS style in an

I recently created a fresh Angular application using the CLI. For my stylesheet, I opted for SCSS. Upon running the application with ng serve, everything was running smoothly. However, when I added some styles to the stylesheet, such as: body { backgr ...

angularnpmangular-cli

I encountered a roadblock with my Npm start process when it got stuck at 70% completion after incorporating the "lazy

I have encountered a problem that has previously been discussed here, but none of the solutions seem to work for me. I recently incorporated this module into an existing project: import { NgModule } from '@angular/core'; import { CommonModule } ...

angulartypescriptnpm

What is the best way to retrieve the responseText using the jQuery.getJSON method within JavaScript?

I am currently facing an issue where I am attempting to retrieve information from a JSON file located in my directory by utilizing the jQuery.getJSON method. Unfortunately, when I try to access the object shown in the image, I am unable to extract the resp ...

javascriptjqueryjson

Sending data from TextBox as json format

JavaScript Code: var latitude = document.getElementById("<%=txt_Lat.ClientID %>").value; var longitude = document.getElementById("<%=txt_Long.ClientID %>").value; var jsonData = {latitude: latitude, longitude: longitude}; var jsonString = JSO ...

javascriptasp.netjsonjson.net

Error in the design of PrimeNg calendar rendering in Angular 2

I have implemented the primeNg module from primefaces in Angular 2 to create a timepicker. It seems to be working, but the design appears broken. Is there something else I need to add to correct the design? Below are the versions of the packages I used: P ...

angularprimeng

Navigating in Angular with parameters without modifying the URL address

In a nutshell, my goal is to navigate to a page with parameters without showing them in the URL. I have two components: Component A and B. What I want to do is route to B while still needing some parameters from A. I know I can achieve this by setting a ...

javascriptangulartypescriptroutes

Should Hateoas links be included in the Header or within the Entity?

I've come across two main methods for incorporating JSON REST HATEOAS, but I'm unclear on which is considered more standard and the advantages and disadvantages of each. The common method I've observed (Atom Links) involves adding a field n ...

jsonrestjax-rshateoas

Utilizing Typescript within Visual Studio Code alongside node_modules

I currently have typescript installed and am utilizing the powerful visual code editor. Whenever I attempt to navigate to the definition of a typescript function in the node_modules directory, Visual Studio Code ends up expanding the entire 'node_mod ...

node.jstypescriptvisual-studio-code

What is the purpose of importing a module in app.module.ts? And what specifically happens when importing classes one by one in the

I am interested in creating an Angular form, but I have a question about why we import 'ReactiveFormsModule' in app.module. Additionally, I am curious as to why we need to explicitly import classes like FormControl and FormGroup again in the temp ...

angulartypescript

Nuxt SSR encounters issues when modifying data variables

There is an issue with my Nuxt app where sometimes when the page loads, I encounter an error in the console that causes the page to stop loading other components. The error message reads: Cannot read properties of undefined (reading 'resolved') ...

typescriptvue.jsnuxt.jsserver-side-rendering

Angular's sanitization script incorrectly modifies the URL value provided in the script src attribute

How can I safely sanitize an external URL to dynamically load a script and remove scripts for a specific component only? Here is the approach I have used: private sanitizeUrl(): SafeResourceUrl { // Value declared in the environment file return ...

javascriptangularangular15angular-dom-sanitizer

Utilizing Typescript to retrieve a specific object property using square brackets and a variable

How can we correctly access a JavaScript object in TypeScript using variable evaluation with bracket notation, such as myObject[myVariable], when the value of the variable is unknown initially? In the code below, an error occurs due to the uncertainty of ...

typescript