Retrieve a HashMap through an HTTP GET request using Angular 10

I am currently using the following versions: Angular CLI: 10.0.1

Node: 12.18.2

OS: win32 x64

Angular: 10.0.2

In my setup, I have a Java Spring Boot service that is functioning correctly and returns data as a HashMap.

Map<String, List<String>>

This is the response of the service call:

// 20200728103825
// http://localhost:1234/config-data

{
  "books": [
    "ABC",
    "PQR",
    "XYZ",
    "QWT",
    "LMN",
  ],
  "categories": [
    "FICTION",
    "DRAMA"
  ]
}

I also have a simple endpoint that returns a list of books as strings. For example:

// 20200728112259
// http://localhost:1234/book-data

[
  "ABC",
  "PQR",
  "XYZ",
  "QWT",
  "LMN",
]

Now, I need to incorporate this data into my Angular code.

The service I have defined looks like this:

import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';

@Injectable({
  providedIn: 'root'
})
export class DataService {

  constructor(
    private http: HttpClient
  ) { }


  loadBookData(){
    console.log("loadBookData Service");
    return this.http.get<string[]>('http://localhost:1234/book-data');
  }

  loadConfigData() {
    console.log("loadConfigData Service");
    // Need assistance here
  }

}

Currently, I am able to retrieve the book data (string[]).

However, I am unsure how to handle and parse complex data stored as a HashMap from the service.

Answer №1

To define a model, you can use the following syntax:

 export class DataModel{
    items: string[];
    tags: string[];
} 

Your method to load configuration data should look like this:

  loadData() {
    console.log("Loading Config Data");
        return this.http.get<DataModel>('http://localhost:1234/config-data')
                .pipe(
                  map((data: DataModel) => {
                    console.log(data.items);
                    console.log(data.tags);
                  })
                 );

  }

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

RecyclerView malfunctioning: issue with attaching adapter

I'm having issues with my adapter class. I've been troubleshooting why the adapter isn't attaching to the recycler view, it keeps skipping layout. I'm not familiar with coders experienced in using Recyclers and I'm unsure where I&a ...

Saving the state of checkboxes in Angular Material

I am trying to figure out a solution for storing checkbox values, specifically whether they have been checked before or not. For example, I have this dialog: https://i.sstatic.net/c16Ju.jpg After clicking on a checkbox and then clicking Save, the checkbox ...

When a React component written in TypeScript attempts to access its state, the object becomes

Throughout my app, I've been consistently using a basic color class: const Color = { [...] cardBackground: '#f8f8f8', sidebarBackground: '#eeeeee', viewportBackground: '#D8D8D8', [...] } export defau ...

Using Angular to store checkbox values in an array

I'm currently developing a feature that involves generating checkboxes for each input based on the number of passengers. My goal is to capture and associate the value of each checkbox with the corresponding input. Ultimately, I aim to store these valu ...

Ways to capture user input with Selenium WebDriver in Java

I need to create a Java project that will fulfill the following use cases: Request URL from user: Display an alert window to prompt the user for the URL. If the user clicks "Cancel", the program should close. Open the provided URL in a browser: After ...

Why does my Visual Studio Code always display "building" when I launch an extension?

https://code.visualstudio.com/api/get-started/your-first-extension I followed a tutorial to create a hello world extension. Why does my VSCode always display 'building' when I run the extension? Executing task: npm run watch < [email p ...

Array-Based Rounding Techniques

massTotal is always displaying as a whole number ending in ".0", even when the decimal part should be coming through. The indexes for massCounter[] are all doubles. Is there a way to ensure that it rounds to one decimal place instead of rounding up to the ...

What is the best way to create a linear flow when chaining promises?

I am facing an issue with my flow, where I am utilizing promises to handle the process. Here is the scenario: The User clicks a button to retrieve their current position using Ionic geolocation, which returns the latitude and longitude. Next, I aim to dec ...

Exploring the magic of Angular 4's FormBuilder: creating dynamic FormControls within a

My application enables users to choose from a dropdown menu of events, each with its own unique properties and selectable property values. This is achieved by creating a FormGroup for each event, with a FormControl for each property. Upon initialization, ...

Subscription date is activated when a different part of the state changes in ngrx

Within my state, I have properties named start and end which store dates. Whenever any other part of the state is modified, the subscription for these start and end dates is triggered. Here is the subscription implementation: this.subs.sink = this.store ...

It is not possible to bind an attribute to an element that already has a Bootstrap class applied to it

Currently, I am working on an Angular 2 web application and incorporating bootstrap for styling purposes. Within the app, there is a small triangle that needs to alternate between being visible and invisible. Here is the code snippet representing this elem ...

tsc will automatically incorporate additional files

I'm grappling with a frustrating issue related to tsc that's really getting to me. The problem involves having a file b.ts in the src folder, and another file a.ts in the project root folder. Here is an excerpt of my tsconfig file: { "comp ...

What is the best way to manage a promise in Jest?

I am encountering an issue at this particular section of my code. The error message reads: Received promise resolved instead of rejected. I'm uncertain about how to address this problem, could someone provide assistance? it("should not create a m ...

Having trouble executing Angular e2e tests above version 2 with protractor while using a proxy

Seeking assistance and guidance! Operating on a Windows system Globally installed Protractor Version 5.3.0 Ran webdriver-manager clean before updating webdriver Updated version with the following command: webdriver-manager update --ie32 --proxy ...

The size of my Android emulator seems disproportionately large, with the screen appearing off-center in the top left corner

Help! My android emulator in Android Studio is displaying as oversized and distorted, with the screen located in the top left corner and the rest of the phone appearing black. It used to work perfectly fine, running all apps from VS Code and Android Studi ...

I am unable to modify values using ngModel

I am struggling to update the value in my service.year.ts file but it seems impossible... <select name="selectedyear" [disabled]="disabledPeriod" [(ngModel)]="selectedyear" (ngModelChange)="onChangeYear()"> <option [ngValue]="selectedyear" ...

Selecting a GoJS Node using keys

In Angular with TypeScript, what is the best way to select a node from a diagram based on its key? Currently, I am required to left-click a newly created node in order to select it, but I would like for it to be automatically selected upon creation. I ha ...

What could be causing my for loop to not function properly within the ngOnInit lifecycle hook?

I am attempting to create a nested loop structure in order to access an array that is inside an object within an array of objects, and then store this data into a new array. My issue arises as the first loop executes successfully but the second one does no ...

The Angular 4 proxy configuration file is not properly directing to the specified target destination; instead, it is redirecting to localhost:4200

I'm having trouble with my Angular 4 proxy configuration file - it's not redirecting to the target I specified and instead is redirecting to <http://localhost:4200>. ...

"Creating a Typescript array by extracting items from a different const array (as seen in the official beginner tutorial

Currently, I am working through the Angular tutorial that can be found at https://angular.io/start. After successfully completing the tutorial, I decided to practice building for production locally. However, when attempting to build, I encountered this err ...