Styling array of arrays

When retrieving data from an API, the structure looks like this:

    "key1" : {
            "subkey1" : value
            "subkey2" : value
            "subkey3" : value
         }
"key2" : {
            "subkey1" : value
            "subkey2" : value
            "subkey3" : value
            "subkey4" : value
            "subkey5" : value
         }
"key3" : {
          "subkey1" : value
          "subkey2" : value
          "subkey3" : value
          "subkey4" : value
         }

To display this data in an expandable format on a webpage, I want to create one expansion panel for each "key". Each panel will contain a table with no headers as shown below:

 (accordion) key 1

Opening the panel will reveal the table with the corresponding data in "key1"

   subkey 1 | value
   subkey 2 | value
   subkey 3 | value


 (another accordion) key2

   subkey 1 | value
   subkey 2 | value
   subkey 3 | value
   subkey 4 | value
   subkey 5 | value

I need guidance on how to properly store the retrieved data in variables within the .ts file and how to format everything using HTML.

angulartypescript

Answer №1

Although it may not fully answer your question, I believe this information could be beneficial:

If you're looking to extract interfaces from your JSON data, a useful tool is json2ts.

After obtaining the interfaces, you can simply use 

const myTsObject: MyInterface = JSON.parse(myJson)
to convert your JSON into a TypeScript object.

Later on, you can utilize it in your HTML like so:

<div>{{myTsObject}}</div>

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

Utilizing symbols as a keyof type: A simple guide

Let's consider the following: type Bar = keyof Collection<string> In this scenario, Bar denotes the type of keys present in the Collection object, such as insert or remove: const x: Bar = 'insert'; ✅ But wait, the Collection also c ...

typescript

Oops! The Angular compiler is throwing an error because it needs TypeScript version greater than or equal to 3.1.1 and less than 3.2.0, but it found version 3

Encountering a curious issue here ERROR in The Angular Compiler demands TypeScript version be greater than or equal to 3.1.1 and less than 3.2.0, but it detected version 3.2.1 instead. Appears that Typescript received an update which is conflicting wit ...

angulartypescriptnpmangular-cli

Is there a way to trigger a function upon the loading of a template in Angular 2?

I'm a newcomer to angular2 and I need to trigger a function when a template loads or initializes. I have experience with achieving this in angular1.x, but I'm struggling to figure out how to do it in angular-2. Here's how I approached it in ...

javascriptangularjsangular

Can Angular be used to dynamically filter a JSON object to display only the fields that match a specified filter text?

Sorry if this question has already been asked; I couldn't find the solution. Here is my issue: In my Angular app, I am retrieving a complex JSON object from a web service. I then present this JSON object to the user in tree format using ngx json vie ...

jsonangulartypescript

When incorporating Dragular into an Angular 2 application, an error may occur if the document object

Being new to Angular2, I encountered challenges while trying to integrate Dragula into my application. Upon running the app, an error occurred before loading the home page: Error: Node module call failed with message: Prerendering failed due to ReferenceE ...

asp.netangularwebpackdragula

Exploring the new possibilities of Angular 5: Enhanced REST API service with paginated data and object mapping capabilities

After implementing pagination in my REST API backend, I now need to update my Angular services to accommodate the changes. Instead of simply returning an array of objects, the API will now return JSON responses structured like this: { "count": 0, ...

angulartypescriptangular-services

Webpack 5 lacks compatibility with polyfills for Node.js

I'm facing a challenge with my npm package that is compatible with both Angular and Node.js environments. Recently, I began using the package in Angular v12 projects, but encountered errors like: BREAKING CHANGE: webpack < 5 used to include polyf ...

node.jsangularnpmwebpackpolyfills

Could the "IonApp" class found in @ionic/angular (Ionic 4) be considered the updated version of the "App" class in ionic-angular (Ionic 3)?

I am currently in the process of upgrading an older Ionic app to Ionic 4. Previously, there were no issues before the migration I am working on a provider file helper.ts, and I have encountered a problem during the migration. Here is the output of ionic ...

angularionic3migrationionic4code-migration

Understanding how to leverage styles.module.scss for implementing personalized styling within react-big-calendar

I'm currently working with the react-big-calendar library in order to develop a customized calendar. However, I've encountered an issue where the SCSS styling is not being applied correctly. export const JobnsCalendar = () => ( <Calendar ...

typescriptnext.jssassmomentjsreact-big-calendar

How can I make TypeScript properly export function names for closure-compiler?

Here is the TypeScript code I am working with: namespace CompanyName.HtmlTools.Cookie { export function eraseCookie(name:string, path:string) { createCookie(name, "", path, -1); } export function readCookie(name:string) { ...

javascripttypescriptminifygoogle-closure-compiler

Wait for the product details to be fetched before returning the products with a Firestore promise

Although I know similar questions have been asked numerous times before, I am struggling with something that seems quite straightforward to me. We have two tables - one called "order_lines" and the other called "order_lines_meta". My goal is to query the " ...

node.jstypescriptexpressgoogle-cloud-firestorepromise

Effortless implementation of list loading with images and text in the Ionic 2 framework

Can someone provide guidance on creating a lazy loading list with both images and text? I understand that each image in the list will require a separate http request to download from the server. Should caching be implemented for these image downloads? Addi ...

angulartypescriptionic-frameworkionic2cordova-plugins

The successful loading of tab favicons in the DOM of an angular chrome extension is a triumph, however, explicit XHR requests are unfortunately

I've been immersed in developing a Chrome extension with Angular 5. Successfully, I managed to extract favIconUrls from the tabs API and link them to my popup.html's DOM. The icons are retrieved and displayed without any hiccups. See an example ...

javascriptangulargoogle-chrome-extensioncors

Enable the use of empty spaces in ag-grid filter bars

I'm experiencing an issue with the ag grid filter. It seems to be disregarding white spaces. Is there a way to configure the grid to recognize blank spaces in the filter? Any suggestions for resolving this issue? Where can I find the option to accept ...

javascriptangularreactjsvisual-studio-codeag-grid-angular

Node OOM Error in Webpack Dev Server due to Material UI Typescript Integration

Currently in the process of upgrading from material-ui v0.19.1 to v1.0.0-beta.20. Initially, everything seems fine as Webpack dev server compiles successfully upon boot. However, upon making the first change, Node throws an Out of Memory error with the fol ...

typescriptwebpackmaterial-uiwebpack-dev-server

Is it secure to utilize Http.Get (with parameters) for accessing WebApis in Angular 2/4?

When calling a Web API in Angular, is it safe to use Http Get with passwords included in the fields? Or would it be more secure to utilize Http Post instead? Check out this example on how to execute an Http.get request in Angular: http.get(baseUrl + &apo ...

angularasp.net-web-apiangular2-http

What is the best way to trigger a function in React when a constant value is updated?

In my React application, I have 3 components. The parent component and two child components named EziSchedule and EziTransaction. Each component fetches its own data from an API. The data to display in the EziTransaction child component depends on the reco ...

reactjstypescriptreact-table

Comparing TypeScript and C++ in terms of defining class reference member variables

class B; class A { A(B b_) : b{b_} {} B &b; }; In C++, it is possible to have a reference member variable like 'b' in class A. Can the same be achieved in TypeScript? Alternatively, is there a specific method to accomplish this in ...

c++typescriptreference

Steps to deactivate an angular material component on version 2.0.0-beta.5

Recent updates have led to an error in my code: Error at /Users/asaylor/Desktop/RevenueIQ/website/aot/node_modules/@angular/material/typings/index.ngfactory.ts:4236:30: Property 'disabled' does not exist on type 'MdCheckbox' I am enc ...

angularangular-material

What causes TypeScript to interpret an API call as a module and impact CSS? Encountering a Next.js compilation error

My website development process hit a roadblock when I tried integrating Material Tailwind into my project alongside Next.js, Typescript, and Tailwind CSS. The compilation error that popped up seemed unrelated to the changes, leaving me baffled as to what c ...

csstypescriptnext.jscompiler-errorstailwind-css