Steps to display JSON array data in an HTML table using Angular

I am in possession of an array structured as such:

var publicArray={
"settings": [{
"id": "1",
"deleted": "0",
"data": [{
"title": " Business Unit",
"value": "B1"
},
{
"title": "Comp ",
"value": "C1"
},
{
"title": " Pa Id",
"value": "P1"
}, {
"title": " NPI",
"value": "4535"
}
]
}, {
"id": "2",
"deleted": "0",
"data": [{
"title": " Business Unit",
"value": "B2"
},
{
"title": "Comp ",
"value": "C2"
},
{
"title": " Pa Id",
"value": "P2"
}, {
"title": " NPI",
"value": "34242"
}
]
}]
};

This data originates from a database and is subject to expansion, implying that additional rows will be added to the array over time.

In order to display this information effectively, I am seeking guidance on how to populate an HTML table resembling the image found here.

Having limited experience in this area, any assistance provided would be greatly appreciated.

angulartypescript

Answer №1

To make use of the component's property named publicArray, you can achieve this by implementing the following template:

<table *ngIf="publicArray?.settings?.length && publicArray.settings[0].data?.length">
  <tr>
    <th>ID</th>
    <th *ngFor="let header of publicArray.settings[0].data">{{ header.title }}</th>
  </tr>
  <tr *ngFor="let row of publicArray.settings">
    <td>{{ row.id }}</td>
    <td *ngFor="let col of row.data">
      {{ col.value }}
    </td>
  </tr>
</table>

Check out Ng-run Example

Answer №2

<table>
  <thead>
    <th>Employee ID</th>
    <th>Department</th>
    <th>Position Title</th>
    <th>Manager ID</th>
    <th>Salary</th>
  </thead>
  <tbody>
    <tr *ngFor="let employee of data.settings; let index=index">
      <td>{{employee.id}}</td>
      <td *ngFor="let info of employee.data">{{info.value}}</td>
    </tr>
  </tbody>
</table>

Check out the example on StackBlitz

https://i.sstatic.net/VXefP.png

Answer №3

If you're looking to create a table in your web application, there are several libraries available that can help you achieve this. Some popular options include PrimeNG and Angular Material.

For those interested in an example using "ngx smart table," you can check out the following link:
https://www.npmjs.com/package/ngx-smart-table.

To get started, follow these steps:

  • Create a settings{} object to define the table header.
  • Set up a publicArray object with data that matches the field names in your settings{}.

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

Angular2: Implementing a nested subscription with a secondary subscription within a loop

I am still discovering the world of Angular2, just a week into it! Currently dealing with 2 API calls in my project. The initial API call fetches an array (queryResults) of JSON objects. (1st Subscribe) Showcasing that array in the view. Iterating throu ...

angularhttprequestangular2-observablesangular2-http

Is it possible to utilize the `disableCSSOMInjection` feature with TypeScript?

Looking to implement disableVendorPrefixes and disableCSSOMInjection, new features in TypeScript for v5. Encountering a TypeScript error (TS2769: No overload matches this call.) when trying to use them. Is there a workaround since @types/styled-component ...

typescriptstyled-components

The gap between columns in Bootstrap grids

Currently, I am dynamically fetching "boxes" and adding them to the HTML document using ngFor. The number of boxes is unknown in advance. Here is the code I am currently using: <div *ngIf="items && items.length" class="row"&g ...

htmlcssangulartwitter-bootstrap

Exploring the parent-child relationship of three components within Angular 2

Currently, I am developing a shopping cart using Angular 2. The application consists of two components - one for categories and another for product listings, both included in the main app component as children. However, I'm facing an issue where these ...

angulartypescriptangular2-template

Exploring Cross-Module Provider Integration in Angular2 RC5

I'm currently working on a project using Angular RC5 and the latest Material Design. Although the latter may not be relevant. To improve organization, I am creating separate modules instead of keeping everything in the main Module. However, I need to ...

angularmoduleangular2-modules

How come I am able to use array.some() but not array.every() when working with union array types?

Imagine a scenario where there is a (silly) function like this: function doSomething(input: number|string): boolean { if (input === 42 || input === '42') { return true; } else { return false; } } Question arises as to why array.som ...

arraystypescript

I'm receiving a ReferenceError because the 'self' parameter is not defined. I'm looking for a way to import a third-party function

image description goes here The dynamic function simply returns a component. Is there a way to successfully import the canvasDatagrid function into my component? Previously, I attempted to use setTimeout within useEffect for importing but it wasn't ...

reactjstypescriptnext.jsimportreferenceerror

Error: The 'name' property is not found in the 'EventTarget' type - React with TypeScript

This code snippet showcases my current setup: <Button disabled={filter === 'Active'} size='md' color='primary' name='Active' // complete = false onClick={this.handleFilterClick} > Active </Button ...

reactjstypescriptreact-tsx

Finding a Solution for the "CORS Policy Blocked" Error When Navigating in an Angular Application with a Locally Hosted API

Testing the Angular app on localhost:4200 against a local Node/Express/MongoDB-based API running on localhost:3000. One of the endpoints being tested allows in-house users to download files, but encountering CORS policy issues on the local setup. Error me ...

node.jsangularexpresscors

(Angular 2/4/5/6) Implementing multiple inner subscribe methods along with a single outer subscribe method

Trying to find a way to call two inner subscribe methods with an outer subscribe method. I am aiming to make three API calls in total, but two of them depend on the results of the first one. this.subscription = this.quoteService //1st api call .get(th ...

angularhttpsubscribeswitchmap

How to integrate external JavaScript files with Angular CLI and Webpack

I'm facing a challenge on how to incorporate JS files (vendors) after transitioning Angular Cli from SystemJs to Webpack. For instance Option A I have npm-installed js files. Simply adding script tags to the head tag doesn't work, and it doesn ...

javascriptangularangular-cli

The 'type' property is not defined in the current type, however, it is expected in the 'Props' type

https://i.sstatic.net/7bD1N.pngI encountered an unusual typescript error in my IDE on line 16 when I was converting my React ES6 component to TypeScript. The error pertains to a chart component that utilizes react-chartjs-2. The error message states that ...

reactjstypescriptreact-chartjs-2

Manipulating URL parameters in Angular 2

I have implemented the following code: this.router.navigate(['/app/chart', {chartColor: this.color, chartWidth: this.width}]); Upon executing this code, the URL is set to: http://localhost/app/chart;chartColor=blue;chartWidth=600 Everything s ...

javascriptangularurltypescriptparameters

Creating a TypeScript rule/config to trigger an error when a React Functional Component does not return JSX

I've encountered a recurring issue where I forget to include a return statement when rendering JSX in a functional component. Here's an example of the mistake: const Greetings = function Greetings({name}) { <div>Greetings {name}</div& ...

javascriptreactjstypescript

Move an outside element onto an event in FullCalendar using Angular

Is it possible to drag an external element (such as a <div>) onto an event already on the calendar without creating a new event? I would like to modify the existing event by applying custom rendering or changing its appearance. Currently, I can succ ...

angulardrag-and-dropfullcalendar

What could be causing the issue of *ngIf not displaying content within ng-container in Angular

I am struggling to close a bootstrap alert box by clicking on the close button using *ngIf. When I click on (close), I set isError to false. Even though I can see isError being logged as false, the ng-container is not disappearing. Here is my code: <d ...

htmlcssangularbootstrap-4

Issue with Angular 8: Undefined value for ngModuleType.ngModuleDef.id when trying to import NguCarousel module

After attempting to import the NguCarousel module, my application encounters an issue due to ngModuleType.ngModuleDef being undefined. Interestingly, if I disable the import of the NguCarousel module, the app functions properly. I have experimented with di ...

angularnpmangular-clingu-carousel

A problem arises when the React effect hook fails to trigger while utilizing React Context

I have created a component that is supposed to generate different pages (one for each child) and display only the selected page: import * as React from "react"; export interface SwitchProps { pageId: number; children: React.ReactChild[]; } ...

javascriptreactjstypescriptreact-hooks

Trigger an action following the outcome of an HTTP request in a component store effect

One particular component store contains an effect that is making an HTTP request. Regardless of whether the request fails or succeeds, my goal is to dispatch an action called myAction in the ngrx store. I initially thought using the finalize operator ...

angularstoredispatchrxjs-observablesngrx-component-store

Configuring Angular for Deployment on DigitalOcean

I have been troubleshooting an issue with deploying my Angular app on DigitalOcean. After creating the application from the App menu, it indicated a successful build. However, when I try to access the live URL, I am met with a "Cannot get / (404 from conso ...

angularconfigurationdigital-ocean