Guide for Showing Data from Json Mapper in Angular 5

As a newcomer to Angular5 with TypeScript, I am trying to figure out how to display data from my JSON. I have an API that was created using Java. I have created a JSON Mapper in my Angular code like this :

The JSON generated from my Java application looks like this :

 [
        {
            "type": "SERVICE",
            "nom": "aide-services",
            "equipes": [
                {
                    "nom": "IKKI"
                }
            ],
            "serveurs": [
                {
                    "id": 2,
                    "nom": "vtcint2",
                    "ip": "10.10.25.45",
                    "indicateurs": {
                        "BUILDDATE": "2018-01-03T06:02:05Z",
                        "STATUS": "OK",
                        "VERSION": "2.2.0-SNAPSHOT"
                    }
                }
            ]

In my current setup, I can only display the type and name of applications like this : {{app.type}} {{app.nom}} However, when I attempt to display data from servers for example, I encounter difficulty: {{app.serveurs}} In the HTML, it shows as [Object object]. How can I resolve this issue? Thank you in advance.

jsontypescriptangular5

Answer №1

<code>

Here is a simple example of TypeScript interfaces representing applications, teams, servers, and indicators:

interface Applications {
  type : string;
  name : string;
  teams: Team[];
  servers: Server[];
}

interface Team {
  name : string;
}

interface Server {
  id: number;
  name: string;
  ip: string;
  indicators: Indicators;
}

interface Indicators {
  BUILDDATE: Date;
  STATUS: string;
  VERSION: string;
}

</code>

Answer №2

After some trial and error, I was able to find a solution to my issue. All I had to do was loop through the elements using the following code snippet:

<div *ngFor="let s of apps">{{s.serveurs.VERSION

This serves as an illustrative example for others facing similar problems.

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

I am puzzled as to why I keep receiving the error message "Cannot read property 'poPanel' of undefined"

CSS In my project, I am implementing a feature that displays an ordered list by looping through an array of objects and adding them on a button click. It works smoothly for adding items, but when I try to implement a remove function to delete each item, I ...

htmltypescriptangular8

What is the best way to customize the default zoom level and position of a map in Google Data Studio?

Is there a way to customize the default zoom level and position of a map chart in Google Data Studio using JSON code? This is the JSON code that can be used for customization: [ { "featureType": "road.local", "stylers&quo ...

jsongoogle-mapslooker-studio

What is the process for importing a map from an external JSON file?

I have a JSON file with the following configuration data: { "config1": { //this is like a map "a": [ "string1", "string2"], "b": [ "string1", "string2"] } } Previously, before transitioning to TypeScript, the code below worked: import ...

jsonreactjstypescript

Is it possible to have Ajax.BeginForm respond with JSON and seamlessly refresh the form without manual intervention?

My goal is to utilize DataAnnotation for validation on my model view and to trigger an action using Ajax.BeginForm or similar feature. The desired outcome is for the action to return JSON that will automatically update the form. In my current code, I am s ...

asp.net-mvcajaxjsonasp.net-mvc-3

Solving issues with event handling through addEventListener within a functional component in React

I am working on a React component that includes an input field and I want to implement a character autocompletion feature. The idea is that when a user types " or ', the same character should be automatically added again, with the cursor placed i ...

javascriptreactjstypescriptinputkeyboard-events

Include a novel item into the JSON string that is being received

Recently, I attempted to parse an incoming JSON string and insert a new object into it. The method I used looked like this: addSetting(category) { console.log(category.value); //Console.log = [{"meta":"","value":""}] category.value = JSON.parse(c ...

javascriptjson

Unforeseen alterations in value occur in JavaScript when converting to JSON format

Having trouble generating a gantt chart from a JSON string, specifically with parsing the JSON string into a JSON object. I have a variable myString containing a JSON string that looks like this: {"c": [{"v": "496"}, {"v": "Task name 1"}, {"v": "9, "}, { ...

javascriptjsongoogle-visualization

Exploring JSON data and retrieving information from a Dictionary

{ ac = 0; storeLocation = "<null>"; storeSizeSqFt = 1000; tinNumber = testdummy4y58; wirelessInternet = 0; } In the response above, a code has been included: func StoreInfo(notification : NSNotification){ if let result = notificat ...

iosjsonswift

What is the reason behind having to press the Tab button twice for it to work?

Currently, I am implementing a Tabbed Form with jQuery Functionality in Angular 4. The Tabbed Form itself is functioning, but I've noticed that I have to click the Tab Button twice for it to respond. See the code snippet below: TS declare var jquery ...

angulartypescript

display Ajax Response in dropdown selection

My task involves selecting multiple tests and dates. Upon clicking submit, the names of laboratories associated with the selected tests are loaded into a select option. Using Ajax script: $('[name=submits]').click(function(e) { e.preventDef ...

phpjqueryjsonajaxcodeigniter

What are the best ways to handle data using the .pipe() function?

Looking to optimize an Angular component Typescript function that returns an Observable<book[]>. The logic involves: If (data exists in sessionStorage) Then return it Else get it from remote API save it in sessionStorage return it End ...

angulartypescriptrxjsobservable

Search for JSON data with unforeseen character in the query path

I have encountered JSON values in a database for the first time. I am trying to use either JSON_VALUE or JSON_QUERY to retrieve specific data from the JSON, but it seems that there are keys with '-' which is causing an issue as it is not allowed. ...

sqljsonsql-serverfor-json

Angular 7's innovative method for handling singleton instances: Dynamic provider

In my Angular application, I have the ability to display lists of videos or articles along with their details. There are two main components: ContentListPage and ContentDetailsPage, which serve the same purpose for both videos and articles. The only diff ...

angulartypescriptprovider

Parsing JSON data with a timestamp field in Jackson

I encountered the following string: { "debug":"false", "switchTime":"2017-04-12 17:04:42.896026" } My attempt was to extract an object using this method: new ObjectMapper().readValue(string, MyObject.class); This is what my MyObject class looks ...

javajsonserializationjacksontimestamp

Stop committing changes in Git when there are any TypeScript errors found

While working on my project in TypeScript using Visual Code, I encountered a situation where I was able to commit and push my changes to the server through Git (Azure) even though there was an error in my code causing a build failure. It made me wonder i ...

gittypescriptazure-devops

Is there a constraint on JSON data?

Is there a limit to the amount of data that JSON with AJAX can handle in outgoing and returning parameters? I am trying to send and receive a file with 10,000 lines as a string from the server. How can I accomplish this task? Can a single parameter manage ...

phpjavascriptajaxjson

Guide on how to create a custom response using class-validator in NestJS

Is it feasible to customize the error response generated by class-validator in NestJs? The default error message structure in NestJS looks like this: { "statusCode": 400, "error": "Bad Request", "message": [ { "target": {} ...

javascripttypescriptnestjsclass-validator

Angular 2 Express failing to trigger ngOnInit method

I'm having some trouble with Angular services. I used the default code from "Angular.io" to make service calls, but for some reason the ngOninit method isn't getting called. I've implemented the component from OnInit and added @Injectable to ...

node.jsangulartypescriptexpress

Is it possible for recursive type definitions to handle generics effectively?

I have identified what I believe to be a bug in Typescript and have submitted it as an issue here. Considering that this might not get resolved quickly, I am reaching out for suggestions. Does anyone know of a better solution or workaround than the one pro ...

typescriptgenericsrecursiontypespartial

Setting button height dynamically in React Native

I've implemented a button using React Native Elements in my layout. Here's the code snippet: <Button title="Login" buttonStyle={{ backgroundColor: Colour.green }} containerStyle={{ ...

cssreactjstypescriptreact-nativeflexbox