How to extract data from JSON files using Angular 12

Having trouble with Angular and TypeScript. Need to fetch a GET API from Spring where the return variable is Page, but the JSON structure looks like this:

"content": [
    {
        "id": 1,
        "category": "TSHIRT",
        "model": "cool pants",
        "mark": "ADIDAS",
        "sizes": [
            {
                "id": 1,
                "sizeName": "XL",
                "count": 10
            }
        ],
        "price": 100.0,
        "discount": 0
    },
    {
        "id": 2,
        "category": null,
        "model": "new shoes",
        "mark": "NIKE",
        "sizes": [],
        "price": 199.0,
        "discount": 0
    },
],
"pageable": {
    "sort": {
        "sorted": false,
        "unsorted": true,
        "empty": true
    },
    "offset": 0,
    "pageNumber": 0,
    "pageSize": 20,
    "unpaged": false,
    "paged": true
},
"last": true,
"totalPages": 1,
"totalElements": 4,
"size": 20,
"number": 0,
"sort": {
    "sorted": false,
    "unsorted": true,
    "empty": true
},
"first": true,
"numberOfElements": 4,
"empty": false

}

This content is causing issues in my Angular code as it cannot handle it properly. Here is my service:

 getAll(){
return this.http.get("http://localhost:8080/items?page=0");

}

And here is my component.ts:

 pantService.getAll().subscribe(result => {
  console.log(result)
  console.log(result.content)
});

I need to paste this result into my itemsList array.

Answer №1

My usual method involves running: npm install axios followed by

axios.get("http://mywebsite.com/items?page=1").then(response =>{
      this.itemsList = response.data.contents
    });

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

Retrieve information using JSON.parse from an ajax request

I have been searching high and low for the solution. Here is the JSON string "[{"id":"0"}]" I attempted obj['id'] and obj.id but to no avail $.ajax({ url: 'php/checkdoctorappointmentonday.php', data: 'doc ...

Having trouble making a call to my RESTful service from an AngularJS application using $http

I am having trouble with reading JSON data from a REST webservice using AngularJS $http. I have a simple REST webservice located in a separate project which returns JSON. However, when I attempt to access the REST service from Angular, it results in an err ...

Utilizing aframe in conjunction with Angular 2

Currently I am attempting to integrate Aframe into my angular 2 project. Although I have imported the library in my index.html file, I am still encountering difficulties using the aframe directive. For instance: <a-scene> <a-box color="red"& ...

What is the best way to store a JSON string in the NSUserDefaults?

I am trying to implement caching for a variable that I can retrieve and display in different parts of my app. Specifically, I have a JSON request that returns parameters like name, and I want to cache the value of the name parameter. For example, if the n ...

Encounter a URL error while attempting to retrieve information from the API

I'm experiencing an issue while retrieving data from openweathermap.org due to an error in the url Error: Thread 1: Fatal error: Unexpectedly found nil while unwrapping an Optional value This is the data structure I am working with: struct CitiesWea ...

Massive HTML Table Containing Rows upon Rows

Currently, I have a server that can provide me with a list of objects in json format, and my goal is to showcase them in a table on the client side. Initially, I thought about dynamically modifying the DOM after receiving data from the server. Building th ...

What issue are we encountering with those `if` statements?

I am facing an issue with my Angular component code. Here is the code snippet: i=18; onScrollDown(evt:any) { setTimeout(()=>{ console.log(this.i) this.api.getApi().subscribe(({tool,beuty}) => { if (evt.index == ...

Struggling to dynamically create an identifier and data-bs-target, but experiencing difficulty in doing so

<ul> <li data-info="Amount in (₹)">{{depositeAmt}}</li> <li data-info="Status"> <button class="statusbtn Process" data-bs-toggle="collapse" data-bs-target="#colla ...

Validation in Ajax Response

When receiving an object from my API call, I want to perform error checking before displaying the JSON data in my view. function response(oResponse) { if (oResponse && oResponse != null && typeof oResponse === "object" && oResponse.response ...

Retrieve data from a JSON file within an ASP.NET MVC application and showcase the parsed information

Can anyone help me troubleshoot why this code is not functioning correctly? I followed the instructions from this documentation: https://www.newtonsoft.com/json/help/html/DeserializeWithLinq.htm. Below is my controller: public class HomeController : ...

Is there a method in AngularJS to compel TypeScript to generate functions instead of variables with IIFE during the compilation process with gulp-uglify?

My AngularJS controller looks like this: ArticleController.prototype = Object.create(BaseController.prototype); /* @ngInject */ function ArticleController (CommunicationService){ //Some code unrelated to the issue } I minified it using gulp: retur ...

Pause for Progress - Angular 6

I'm looking for a solution to solve the following issue. I need to access a property that will store data from an http request. Therefore, I want to verify this property only after the transaction is completed. validateAuthorization(path: string): ...

retrieve the JSON object corresponding to the specific category

Here is an example of a JSON: [ { "id":1, "name": "BMW E46 PANDEM", "price": 130000, "currency":"USD", "color":"white", "category":"car" }, { "id":2, "name": "Yamaha", "price": 2000, "currency":"USD", "c ...

The NUXT project encounters issues when trying to compile

I am currently working on an admin panel using the nuxt + nest stack. I am utilizing a template provided at this link: https://github.com/stephsalou/nuxt-nest-template While in development mode, the project starts up without any issues. However, when I ...

Creating a hierarchical menu structure by splitting strings in an array using an algorithm

I have an array of strings in Javascript that look like this: var array = [{ string: 'path1/path2/path3' }, { string: 'path1/path4/path5' }, { string: 'path1/path2/path6' }, { string: 'path10/path7' }, { s ...

Material UI React Autocomplete Component

I'm currently working on integrating an Autocomplete component using the Material UI library. However, I've encountered a challenge - I'm unsure of how to properly pass the value and onChange functions, especially since I have a custom Text ...

Angular2: Navigational Errors Demystified

After updating the angular packages from version 2.4.10 to 4.0.0, I encountered the following errors when navigating: ERROR Error: Uncaught (in promise): Error: Found the synthetic property @transformPlaceholder. Please include either "BrowserAnimationsMo ...

Utilizing APNS with Node for sending payload notifications using single quotes

Currently, I am conducting a push notification test using the node-apn module in node js. Everything seems to be functioning correctly except for special characters like single quotes not being properly escaped. For example, when sending a push notificat ...

Troubleshooting Angular Build Errors: Integrating Three.js

Upon setting up a new Angular application and integrating three along with @types/three, I proceeded to create a basic component. However, upon executing ng build --prod, the following errors are displayed: ERROR in node_modules/three/src/core/BufferAttri ...

How to make Angular 5 wait for promises to finish executing in a for loop

My task involves working with an array like this: arr = ['res1', 'res2', 'res3']; For each value in the arr, I need to make an API call that returns a promise. arr.forEach(val => this.getPromise(val)); The getPromise me ...