Guide on accessing data from an object with ngfor in Angular

I'm currently trying to retrieve price data from the space array inside an Object.

https://i.sstatic.net/v3S3b.png

 this.apartmentService.customPackage(this.uid, this.client, this.access_token).subscribe(user => {
      this.packages = user;
      console.log(this.packages);
      
    })
  }

Template File

 <ng-container *ngFor="let item of packages?.essential_interiors.space.name | keyvalue">
  <li class="list-group-item">{{item.value}}</li>
</ng-container>

However, I'm facing difficulty in fetching a specific space from this response.

Any guidance would be greatly appreciated.

javascriptangulartypescript

Answer №1

In order to remove the name from the foreach loop, you can do the following:

 <ng-container *ngFor="let item of packages?.essential_interiors.space">
 <li class="list-group-item">{{item.price}}</li>
 </ng-container>

Answer №2

KeyValuePipe is designed to convert only Objects or Maps into an array of key-value pairs.

However, in this scenario, you are dealing with an array named space.

To handle this, simply iterate through the array using 

*ngFor="let item of packages?.essential_interiors.space"

 <ng-container *ngFor="let item of packages?.essential_interiors.space">
  <li class="list-group-item">{{item.price}}</li>
</ng-container>

Check out a working example here

Answer №3

Take a look at the following code snippet and tell me what will be displayed as output:

<ul>
  <li *ngFor="let item of packages; let i = index">
    {{i}} {{item}}
  </li>
</ul>

Answer №4

Have you experimented with inserting item.essential_interiors.space.name directly into the li tag in this way?

 <ng-container *ngFor="let item of packages">
  <li class="list-group-item">{{item.essential_interiors.space.name}}</li>
</ng-container>

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

Using Node.js to read and replicate a JSON file

As someone who is relatively new to the world of NODE.JS, I am eager to level up my skills. Currently, I have a NODE.JS script that gathers data from a feed, resulting in a large JSON file. This file is then used by webpages and mobile apps to display con ...

javascriptjqueryjsonnode.js

What is the best way to pass a JSON object from R to Plumber in a format that JavaScript can interpret as an array instead of

My goal is to receive a JSON raw response from R Plumber and then utilize it in Angular. However, I am encountering an issue where the JavaScript Framework is interpreting it as a string instead of recognizing it as JSON format. "[{\"id&bsol ...

javascriptrplumber

I want to design an attractive expandable mobile menu featuring plus and minus icons. It should look visually appealing and

Can someone please take a look at my code snippet here: http://jsfiddle.net/o2gxgz9r/2287/ Currently, the design shows a plus and minus sign, but I would like to style them using CSS instead of using symbols. Additionally, I need assistance with implement ...

javascriptjqueryhtmlcss

Encountering an ERROR with the message "Error: NG0100: ExpressionChangedAfterItHasBeenCheckedError" while attempting to apply a filter to

My mat table includes a filter that utilizes chips to sort by multiple criteria. Upon my initial attempt to filter and save the criteria, I encountered an error called ExpressionChangedAfterItHasBeenCheckedError. The error message indicates a transition f ...

javascriptangulartypescriptangular-material-table

Tips for developing an npm package that includes a demonstration application

When creating packages, I believe it's important to include a demo app. However, I'm unsure about the best way to organize the file structure for this purpose. My goal is to have one Github repository containing both my published NPM module and ...

javascriptnpmpackage-development

What could be the reason for my Express server returning a 404 error for all files other than index.html?

Currently, I am delving into Node.js with Express in order to set up a small server for educational purposes. Strangely, every request made to files linked within my index.html file, such as the .css, .js, and image files, results in a response code 404. ...

javascriptnode.jsexpresswebserver

The most efficient method for manipulating the DOM in React for superior performance

When it comes to animating a DOM element with a number sequence going from 0 to N using a tween library in React, what is the most efficient and reliable approach? Would using setState be considered ideal, even when combined with the shouldComponentUpdate ...

javascriptreactjsanimation

Create a visually stunning highchart using information retrieved from an external JSON file

I attempted to utilize JQuery to read a JSON file in order to populate a highcharts chart, but unfortunately, I was unsuccessful. Here is the JSON data stored in the file: [{"Bellman-Ford": {"totalRate": 1.123, "way": [], "time": 0.00014495849609375}}, {" ...

javascriptjqueryjsonhighcharts

The jQuery code continues to loop endlessly

My current script includes a fadeIn effect on a div when the user scrolls 200px from the top, along with custom circle animations. While it works, I admit it's not the most elegant solution as I had to piece together different scripts to make it funct ...

javascriptjqueryhtmlcss

Cannot get Typescript Module System configuration to function properly

I'm encountering an issue with my existing TypeScript project where I'm trying to change the module type to System, but despite setting it in the project properties, the compiler always outputs in AMD format (define...). It's frustrating be ...

typescriptvisual-studio-2015

Disappear text gradually while scrolling horizontally

There is a need to create a special block that displays fading text on horizontal scroll. However, the problem is that the block is situated on a non-uniform background, making the usual solution of adding a linear gradient on the sides unsuitable. Click ...

javascripthtmlcssfade

What is the best way to capture GotError [HTTPError]: When the response code 404 (Not Found) occurs in a nodejs

If the URL provided is incorrect and the Got module raises a HTTPError, how can I properly catch the error? Using try-catch does not seem to be effective in this situation. const got = require('got'); got(`https://www.wrongurl.com`) ...

javascriptnode.jshttp-errornode.js-got

What is the most efficient way to transfer an object between two functions in AngularJS?

As a beginner in AngularJS and Javascript, I recently attempted to pass an object from one function to another. Here is the HTML Code: <div ng-click="getValueFromHtml(userObj)">send Object </div> This is the Controller Code: $scope.getValueFr ...

javascriptangularjs

Ways to launch the React Material date picker while hiding the date input field

I am working with the react material (MUI-X) date picker and my specific requirement is to have the date picker open on button click without displaying the date text field. I simply want to show the calendar and allow users to select a date. I have explore ...

javascriptreactjsreact-nativematerial-uimui-x

'Without the need to refresh the page, assign a JavaScript variable from JSP on the server side.'

I'm looking for a way to assign a JavaScript variable from JSP without triggering a full page reload. While my current code successfully sets the variable, it also causes the entire page to refresh as a side effect. Here's an example in the exam ...

javascriptjsp

Using React.js to compute dates based on user-inputted dates

Today was dedicated to tackling the coding challenge of creating a function. I'm currently working on a react app using the PERN stack. The form I'm working on includes multiple date inputs, with two date columns and a total days column. My goal ...

javascriptreactjs

Insert a new item into a current array using Typescript and Angular

-This is my curated list- export const FORMULARLIST: formular[] = [ { id: 1, name: 'Jane Doe', mobileNumber: 987654, secondMobileNumber: 456789, email: '<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="e1bcc0d9ec ...

angulartypescript

unanticipated redirection with Vue router

Here is the routing code snippet: // exporting for component use export var router = new VueRouter(); // defining routes router.map({ 'home': { component: Home, auth: true }, 'login': { component: L ...

javascriptvue.jsvue-componentvue-router

I encounter a connection refusal from localhost whenever I try to set up setupProxy.js

I created a solution with setupProxy.js to address a CORS issue: const proxy = require('http-proxy-middleware'); module.exports = function (app) { app.use( proxy('/myUrl', { target: 'http://localhost:8090&a ...

javascriptreactjsnpmproxy

Share an entire /folder through an express server

I am currently working on an express server setup, and I am looking to streamline my route handling for managing an entire directory structure. root /html /css /js /app.js /images /index.html /some-other.htm ...

javascriptnode.jsexpress