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

Create a function that is identical to the original, but omits the final

I am currently working on defining a type B that functions similarly to type A, but without the last parameter. I have attempted the solution below, however, it is still requiring 2 parameters instead of just one. type Callback = (msg: string) => void; ...

typescript

Inside the function() in angular 2, the value of 'this' is not defined

I've integrated a UIkit confirmation modal into my app. However, I'm encountering an issue when trying to click the <button> for confirmation. The this inside the function is showing up as undefined. Here's the snippet of code in quest ...

javascriptangulartypescriptecmascript-6

Error: Tried to modify a property that is read-only while using the useRef() hook in React Native with Typescript

I'm facing an issue while attempting to utilize a useRef hook for a scrollview and pan gesture handler to share a common ref. Upon initializing the useRef() hook and passing it to both components, I encounter an error that states: TypeError: Attempte ...

javascripttypescriptreact-nativereact-hooksuse-ref

Discrepancy detected in AGM Map printout

When attempting to print my Angular AGM Map from Chrome, I noticed a large grey gap in the map. This gap is visible even when "background graphics" are turned off and it causes the map image below it to shift downwards. If you want to reproduce this issue ...

cssangulargoogle-maps-api-3printingangular-google-maps

What is the best way to ensure that multiple queries are returned in the correct sequence?

In the interface below, there is a search input box along with data displayed. As you type in the search input, the data below filters accordingly. Each letter typed triggers a request to retrieve the relevant data. For instance, if you type "folder," the ...

reactjstypescriptasynchronousrequest

Angular and Bootstrap do not support margin styles

While working with Angular 5 and Bootstrap, I have encountered an issue with using inline styles for margin. The template I am using is as follows: @Component({ selector: "dynamic-container-component", template: ` <div styl ...

cssangularbootstrap-4

typescriptCreating a custom useFetch hook with TypeScript and Axios

I have a query regarding the utilization of the useFetch hook with TypeScript and Axios. I came across an example of the useFetch hook in JavaScript, but I need help adapting it for TypeScript. The JavaScript implementation only handles response and error ...

javascriptreactjstypescriptaxios

How can I achieve hover and click effects on an echarts sunburst chart in Angular using programming techniques?

Could I create hover and click effects programmatically on an Echarts sunburst chart using Angular? For example, can I trigger the sunburst click or hover effect from a custom function in my TypeScript file like this: customFunction(labelName: string): v ...

angularechartssunburst-diagram

Issue with TypeScript when calling the jQuery getJSON() method

Currently, I am working with TypeScript version 1.7.5 and the latest jQuery type definition available. However, when I attempt to make a call to $.getJSON(), it results in an error message stating "error TS2346: Supplied parameters do not match any signatu ...

typescripttsd

The installation of msal-angular is encountering issues with the peer rxjs version "^6.0.0" from @azure/[emailprotected]

I am attempting to incorporate @azure/msal-angular for Azure B2C authentication with Angular as the front end, but encountering errors during package installation. npm ERR! code ERESOLVE npm ERR! ERESOLVE unable to resolve dependency tree npm ERR! npm ...

angularazurenpmnpm-scripts

Struggling to retrieve the image URL from a TypeScript file

I'm currently developing a basic app in Ionic that will include a feature to display a list of registered users along with their profile pictures. These profile images are stored in Firebase storage. Although I have successfully retrieved the URLs fo ...

htmlangulartypescriptfirebaseionic-framework

Issue with default country placeholder in Ionic 6.20.1 when using ion-intl-tel-input

I have successfully downloaded and set up the "ion-intl-tel-input" plugin from https://github.com/azzamasghar1/ion-intl-tel-input, and it is functioning properly. However, I am facing an issue with changing the default country select box placeholder from " ...

typescriptionic-frameworkcordova-pluginsionic6intl-tel-input

"Augury Angular 2 is like a tree that generates insights like no

As I work on documenting my project, I am looking to create documentation that will make it easier for beginners to understand the project's structure in the future. I am using Angular2 and documenting with Typedocs. My question is: Are there any solu ...

angularviewtreecomponentsstructure

When an event is triggered in Angular Component, the object is not properly defined in the handler causing errors

While experimenting with createjs and angular, I encountered an issue when trying to update my stage after an image loads. It seems like there might be a problem related to Angular in this situation. Upon completion of the load event on the Bitmap object a ...

javascriptangularcreatejs

Improving Efficiency in Angular 2 for Managing a High Volume of Items

Imagine a scenario where I have created a component that showcases a list of items. export class ListComponent implements OnInit{ public list:any; constructor(private _ls: ListService) {} ngOnInit() { this._ls.listLoad().subscribe((data ...

angularangular2-templatengrx

Retrieving the initial row of a specified category using ngFor in Angular 2

My challenge involves working with data in Angular 2. Here is a sample dataset: [ {text: "first", name: "a"}, {text: "rw", name: "a"}, {text: "ds", name: "b"}, {text: "asdf", name: " ...

angularngfor

NestJS Logger: Issue setting logger types in main.ts

When attempting to specify logger types in main.ts as illustrated in the official documentation: const app = await NestFactory.create(ApplicationModule, { logger: ['error', 'warn'], }); await app.listen(3000); I am encountering an i ...

javascriptnode.jstypescriptnpmnestjs

Is there a method of converting React components into strings for manipulation?

In my React TypeScript project, I am utilizing a crucial library that contains a component which transforms text into SVG. Let's refer to this library component as <LibraryRenderer />. To enhance the functionality, I have enclosed this componen ...

reactjsstringtypescript

Linking a string value to a specific data structure in TypeScript

I'm currently exploring typescript and I have a question about mapping a string value to a custom type when using templates in function calls. For instance: object.method<TypeMapper['CustomType']>([...]) In this scenario, 'Cust ...

typescripttypes

Angular6 Observables used in API service with dynamic arguments

In order to achieve the desired behavior, I am trying to implement a system where when a user selects a label from a dropdown menu, an API call is made with that specific label as an argument. Subsequently, a chart should be redrawn using the data received ...

angulartypescriptrxjs