Angular2, Typescript, and Json are crucial components in modern web

I need assistance with printing nested json in an Angular2 Component's template. I am using the angular2 platform to develop an application, and I am currently stuck on this issue.

Here is the json file:

{
    "id": "0001",
    "type": "donut",
    "name": "Cake",
    "ppu": "0000.55",
    "batters":
        {
            "batter":
                [
                    { "id": "1001", "type": "Regular" },
                    { "id": "1002", "type": "Chocolate" },
                    { "id": "1003", "type": "Blueberry" },
                    { "id": "1004", "type": "Devil's Food" }
                ]
        },
    "topping":
        [
            { "id": "5001", "type": "None" },
            { "id": "5002", "type": "Glazed" },
            { "id": "5005", "type": "Sugar" },
            { "id": "5007", "type": "Powdered Sugar" },
            { "id": "5006", "type": "Chocolate with Sprinkles" },
            { "id": "5003", "type": "Chocolate" },
            { "id": "5004", "type": "Maple" }
        ]
}

If anyone can provide some guidance on how to achieve this, it would be greatly appreciated. Thank you! :)

jsonangulartypescript

Answer №1

Here's a suggestion for your code:

<div *ngFor="let item of jsonData">
    <div>{{item.id}}</div>
    ...
    <div *ngFor="let bat of item.batters.batter">
        <div>{{bat.id}}</div>
        <div>{{bat.type}}</div>
    </div>

    <div *ngFor="let topp of item.topping">
        <div>{{topp.id}}</div>
        <div>{{topp.type}}</div>
    </div>
</div>

If you update your object like this:

 ...,
 "batters": [
    { "id": "1001", "type": "Regular" },
    { "id": "1002", "type": "Chocolate" },
    { "id": "1003", "type": "Blueberry" },
    { "id": "1004", "type": "Devil's Food" }
  ],
  ...

You can modify the loop as follows:

<div *ngFor="let bat of item.batters">

I hope this solution works for you.

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

Ways to check for child items in a JSON object

My Angular-built menu uses JSON and spans up to 3 levels deep. Some items have no children, while others go further down the hierarchy. I'm trying to determine if a selected subcategory has child elements in order to hide a button. Each time a subcat ...

javascriptjsonangularjs

What is the best way to add numerous images to a Laravel platform via ajax using pure javascript?

I am currently working on a form where users can upload one or more photos to the server using ajax. Sometimes, users may not upload any photos at all. How can I efficiently send the data from the file input to the server in the background? Below is the r ...

javascriptjsonajaxlaravelfile-upload

Navigating through alterations in intricate data utilizing the BehaviorSubject concept

If I have a Service that offers a BehaviorSubject to any component needing the most up-to-date version of certain data, how can these components differentiate what changed in the data when they receive notifications? export class DataService { pri ...

angulartypescriptrxjs

How can one HTML form be used to request a unique identifier from the user, retrieve a record from the database, parse it into JSON format, and then populate an HTML page form using the

As someone who isn't an expert in any specific coding language, I have a knack for piecing things together to make them work. However, my current challenge is stretching my technical abilities a bit too far. Here's what I'm trying to achieve ...

phpjavascriptjqueryhtmljson

Tips on how to personalize the print layout of an Angular 4 page when pressing ctrl+p

I am working on an angular4 app and I encountered an issue when trying to customize the print page view by pressing ctrl+p in the browser. The page that needs to be printed contains only Angular components, and my attempts to modify the print view using ...

angularcssangular5

When a function is included in an object, it transforms into something other than a function

In my model, it looks like this: export default class UserObject { name: string; id: string; validateInsert() { } } If I interact with the model in this way: const modelUser: UserModel = new UserModel(); modelUser.ID = 1; modelUser ...

javascriptjsonangularresttypescript

Tips for creating an Ionic app in Production mode, the Ionic build process may exhibit peculiar behavior

I am in the process of preparing my Ionic application for production. After executing the ionic build --prod command, the application builds successfully. However, upon running it on the server, I encounter errors related to: cordova.js, main.js, Vendor.j ...

javascriptangularionic-frameworkbuildionic3

The fuse box was to blame for triggering a GET request to http://localhost:4444/, resulting in the error message

I encountered an issue with fuse-box and P5.js where I received a GET http://localhost:4444/ net::ERR_CONNECTION_REFUSED. The complete code can be accessed on GitHub. The fuse.js file contains the following configuration: const { FuseBox, WebIndexPlugin ...

node.jstypescriptp5.js

Understanding and unpacking JSON data using the T literal

When I receive a JSON with a date formatted as follows: yyyy-MM-ddTHH:mm:ssZ I am having trouble deserializing it correctly. I've attempted various methods like: @JsonFormat(pattern = "yyyy-MM-dd'T'HH:mm:ssZ") private SimpleDateFormat cre ...

javajsonspring

Issue found in VS2015 with the sequence of AngularJS TypeScript ts files within the appBundle.js file

I've been diving into AngularJS and TypeScript with the VS2015 RC Cordova TypeScript project. Recently, I created a "MyController.ts" file in the same folder as "index.ts". The code worked perfectly fine: module MyTestApp{ export class MyContro ...

angularjscordovatypescriptvisual-studio-2015

Saving navigation paths in database

Is there a way to store routes in a database? For example: const routes: Routes = [ { path: 'url-of-component, component: ABCComponent } Can ABCComponent be stored in a mySQL database? Alternatively, how can I link the component to its path ...

angulartypescript

How can you eliminate a specific element from an HTML document?

Utilizing localStorage can be tricky when it comes to keeping the JSON file hidden from being displayed on the HTML page. One approach I used involves sending the JSON file to the client once and then performing all logic using that file. To prevent the JS ...

javascriptjsonhtmllocal-storage

Guide to customizing the appearance of a Bootstrap Component within an Angular project

Is it possible to completely customize the style/CSS of a component from ng-bootstrap? Here's the issue I'm facing: I have this code... <ngb-datepicker #dp [(ngModel)]="model" (navigate)="date = $event.next" style ...

cssangularangular-ui-bootstrapweb-component

The date provided in the JSON response does not match the date stored in the database

I have a sails.js application where I am encountering an issue with the createdAt field in my MySQL database. When I add a record, the value of createdAt in the MySQL console appears as Wed Mar 25 2015 00:00:00 GMT+0100. However, when I retrieve this data ...

jsonsails.js

Issue with IE11 compatibility in Angular2 (AngularQuickStart version 2.4.0) due to syntax error

Encountering an error in the browser console when attempting to run my Angular2 app on IE11. The error "Недопустимый знак" translates to unacceptable symbol. https://i.stack.imgur.com/0mHBC.png Here is a snippet of my index.html: <!DO ...

angulartypescriptinternet-explorer-11

What advantages does Angular's Dependency Injection offer for a basic object setup?

The Angular documentation provides an example of injecting a value (configuration object) using @inject in the constructor for scenarios where a class is not being injected. https://angular.io/guide/dependency-injection#non-class-dependencies I managed t ...

angulardependency-injection

Exposing the method to the outside world by making it public in

I have a situation where I have a base class with a protected method called foo, and a child class that needs to make this method publicly accessible. Since this method will be called frequently, I am looking for a more efficient solution to avoid unnecess ...

typescript

Leveraging the `--max-http-header-size` flag with ts-node

Encountered an issue when trying to use ts-node with the --max-http-header-size 15000 flag. It works fine with regular node, but unfortunately, ts-node does not support that option ...

node.jstypescriptts-node

Parsing the header parameter in a GET request from Angular within the Spring backend

Recently, I delved into Rest services in Spring and learned from a tutorial that sending parameters to the backend can be done securely through the following method: getCompanyDetails(username:string): Observable<CompanyObject>{ const headers = ...

angularspringtypescripthttp

"Troubleshooting: Why is the Angular Material MatPaginator not showing any

I'm facing an issue while trying to set up a data table in Angular 8. The paginator located below the data table seems to be malfunctioning. Despite having 10 hardcoded records in my component, changing the elements per page to 5/10 does not alter the ...

angularangular-material