Tips on showcasing Java map information obtained from the backend on an Angular/Typescript interface

I have a 'detailsMap : any' variable from the backend that contains multiple rows in the format (key1,key2). I need to display this data in the UI using TypeScript/Angular2. Please advise on how I can achieve this.

key1 : { Name:'ABC' , address :'JKL street 123', phone:'012345678' }

key2 : { Name:'QER' , address :'STR street 123', phone:'888888888' }

I am trying to display the data in a fixed static template as shown below, but it is not working and I'm getting an error ''Test.html:7 ERROR TypeError: Cannot read property 'key1' of undefined'

<div >
    <div >{{
    detailsMap['key1'].Name}}</div>
    <div >{{
    detailsMap['key1'].address}}</div>
</div>
<div >
    <div >{{
    detailsMap['key2'].Name}}</div>
    <div >{{
    detailsMap['key2'].address}}</div>
</div>

Answer №1

To begin, you must convert the Java map data into an array of JSON objects using Object Mapper before transmitting it to Angular. After that, you can iterate through the array of JSON objects received from the server and display them in the user interface.

<div *ngFor="let item of items">
    <div> item.name </div>
    <div> item.address </div>
</div>

Answer №2

The problem was successfully resolved after discovering that the 'detailsMap' array was not being displayed in the template.

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

Enhancing webpage design by dynamically changing borders and headers using JavaScript

I have implemented a fixed positioning for the table headers using the following code: onScroll={() => { document.querySelector('thead').style.transform = `translate(0,${this.scrollRef.scrollTop}px)`; }} However, when I scroll the ta ...

Is it better to parse HTML in PHP or JavaScript for an iPhone web application?

I am in the process of creating a web application for iPhone/iPod touch. I need to incorporate an external HTML file and extract specific data from it. One approach is to handle this on the server side by creating a separate page that echoes the desired d ...

Grabbing the mouse in Firefox

Are there any alternatives to the .setCapture(); and .releaseCapture() functions in Firefox that do not involve using jQuery? (The client prefers not to use it) ...

Using child routes in eager loaded components can be achieved without making any changes to

In many tutorials, I have noticed that RouterModule.forChild(..) is commonly used for lazy loading. However, I am of the opinion that this forChild method can also be utilized for eager loading. Its advantage lies in the fact that routes can be configured ...

What methods work best for retrieving non-API data in Next.js when deploying on Vercel?

Before rendering my application, I am working on fetching my data. Luckily, Next.js offers a method called getStaticProps() for this purpose. Currently, I am utilizing the fs module to retrieve data from a json file in my local directory. export async fun ...

Attempting to grasp the concept of Typescript generics

I have a function defined as follows: interface ExtraModels extends Model { unknown: string } const write = async (data: ExtraModels[]) => { console.log(data[0].unknown) } This function is currently working. However, I want to modify it to: cons ...

What could be causing the state variable to fail to update in React?

Whenever a certain condition is met, a state variable should be updated. However, whenever it enters the if statement, the index remains at 0. import React, { useState, useEffect } from 'react'; import { words } from "./words.json"; im ...

How to trigger a JavaScript function when the UI-Router state is switched?

Within my Angular App, I am utilizing ui-router to manage navigation and other tasks. In a separate script file, there is a function that looks like this: $(function () { function doSomething(){ if ($('.thisclass').length) { $(' ...

The onDrop event in javascript seems to be failing to execute

My attempts to get the javascript onDrop event to execute when an object is dropped into a drop zone have been unsuccessful. I've tried rewriting it in various ways without any success or error messages. In my search for potential reasons why the ondr ...

When using jQuery's remove() or after() functions, be aware that they may inadvertently remove

Here is the html code I am working with: <p>This is some random text in a paragraph with a <span class="blue">blue</span> word.</p> <p>This is some random text in a paragraph with a <span class="blue">blue</span> ...

Trouble with React Material Modal TransitionProps triggering onEntering event

Currently, I am in the process of updating Material UI to version 5. Initially, I encountered an error stating that onEntering is deprecated and should be replaced with transitionprops. There is a specific method (let's name it doSomething) that I wa ...

Different ways to showcase data using the Document Object Model instead of traditional tables

I'm encountering an issue with the application I'm developing. It involves working with an Oracle database to retrieve information and display it on a webpage in a table format. However, I am interested in exploring alternative methods for workin ...

Having an issue with my Django model not properly saving data when receiving a POST

Just dipping my toes into the world of ajax and Django, so please bear with me for my messy code. I'm facing an issue where my Django model is not saving the response even after receiving a POST request. I'm attempting to create a simple like/di ...

jQuery plugin modifies keypress events

I have integrated the Jquery ImgAreaSelector plugin into my website. Within my site, I have implemented several keypress triggers using jquery. For example: $(document).bind('keypress', 'S', function(){ alert("You have pressed S key ...

Filtering out any inappropriate characters from the XML data before processing it with the XMLSerializer function

I am currently working on a solution to store user-input in an XML document using client-side JavaScript and then transmit it to the server for persistence. One specific issue that I encountered was when a user input text containing an STX character (0x2) ...

Having trouble getting your .NET Core web application to run properly with Angular

https://i.sstatic.net/N5krh.png I am having trouble launching a sample application and encountering several errors in the process. For instance, when I run npm install -g @angular/cli, I receive an error message stating that ng is not recognized as an int ...

Installing a specific version of yarn on Ubuntu

Is there a way to install yarn version 0.27.5 in Ubuntu despite the fact that the latest update is for version 1.2.1? ...

Error in React .js: Unable to access property 'name' as it is undefined

I keep encountering this issue: Uncaught TypeError: Cannot read property 'name' of undefined In my code, I have a user object defined in the App.js file. However, when I attempt to access its properties within my Person component, it throws a ...

Implementing CORS in ReactJs: A Step-by-Step Guide

When working with React.js, I often use this fetchData config: fetchData = () => { fetch("http://localhost:8000/batch_predict", { method: "POST", headers: { 'Accept': 'application/json, text/plain, */*&apo ...

Issue: Expressjs is throwing a TypeError due to an attempt to read the 'id' property of undefined

I am currently working on a registration function in expressjs, but I keep encountering the following error message: TypeError: Cannot read properties of undefined (reading 'id') This is my user model: Users.ts interface UserAttributes { id: ...