Discovering ways to fetch data collections from the JSON Object by applying asynchronous techniques in Angular 6

After receiving the JSON data response from the server, it looks like this:

{ "isValid":true, "count":3, "code":200, "data":[ { "name":"xxx", "department":"cse", }, { "name":"yyy", "department":"it", }] }

<div *ngFor="let x of hotels$.data | async">
<hotel-list [listData]="x"></hotel-list>

Even after attempting the above code, I am unable to retrieve any results from the loop.

Answer №1

While the information provided is limited, it appears that the best approach would be:

<div *ngFor="let x of (hotels$ | async)?.data">

This is because hotels$ appears to be an observable, whereas hotels$.data is not.

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 Angular to transmit variables to HTML

I need help with the following HTML code: <mat-card *ngFor="let shift of employer.shifts"> <mat-card-content> <div *ngIf="getShiftLocation(shift);"> <div>{{ getShiftLocation(shift)[&apo ...

A white background emerges when I select md-dropdown

Lately, I've been experiencing an issue on my website where a white background pops up whenever I click on a dropdown (md-select) in my form. Initially, it only happened with forms inside a modal, but now it's affecting dropdowns across the entir ...

Tips for effectively generating a JSON object array in Typescript

Currently, I'm attempting to construct an array of JSON objects using TypeScript. Here is my current method: const queryMutations: any = _.uniq(_.map(mutationData.result, function (mutation: Mutation) { if (mutation && mutation.gene) { co ...

Attempting to access a non-object property - JSON parsing

I'm encountering an issue with consuming an API. Within the response, there is an array field called authors, and each author contains 2 fields. https://i.sstatic.net/1a5Fw.png I am trying to manage the text field but facing some errors. Here is ho ...

Guide on aggregating values of a specific property within an array of objects, considering a given condition

As a junior Web Developer seeking some guidance to solve a problem, I am reaching out here for the first time. Please bear with me if I miss any crucial details. The data array I have looks like this: [ {x: Date(1234), y: 0} {x: Date(1235), y: 0} {x: ...

JavaScript Lint Warning: Avoid declaring functions inside a loop - unfortunately, there is no way to bypass this issue

In my React JS code snippet, I am attempting to search for a value within an object called 'categories' and then add the corresponding key-value pair into a new map named sortedCategories. var categoriesToSort = []; //categoriesToSort contains ...

Utilize Type Script/Angular 8 for seamless file management by either dragging and dropping files or selecting

Can you provide guidance on using the ng-upload-file plugin with TypeScript? https://github.com/danialfarid/ng-file-upload I attempted to implement it but encountered difficulties. Do you have a working sample available or know of another open-source plu ...

Setting up ESLint for TypeScript to enforce the "no-unused-vars" rule

In all my TypeScript projects, I utilize ESLint with specific settings in place: "extends": ["airbnb", "prettier", 'plugin:vue/recommended'], "plugins": ["prettier"], "parserOptions&quo ...

Having trouble with a Three.JS/WebGL 3D object not loading in Firefox?

After creating a 3D Object using Three.js examples, I noticed that it works perfectly in Chrome and IE 11, but for some reason, it's not loading on Firefox. I am currently using the latest version of Firefox (FF 27.0). When I tested the code on Firef ...

Using the OR condition in the ternary operator within ReactJS

Recently, I have started working on a ReactJS project focusing on menus. In this project, I have successfully implemented logic for the active menu feature. For instance, when a user is on page 2, the corresponding menu item will be highlighted as active. ...

What is the best way to hide only the rows in a table when it is clicked using JavaScript?

Is there a way to hide rows in these tables by clicking on the table head? I'm currently using bootstrap 5 so JQuery is not an option. <table class="table table-info table-bordered"> <thead id="tablea"> ...

What is the best way to convert an Angular object into a string using a for-loop and display it using $sce in AngularJS?

Currently, I am rendering a block of HTML and directives using $sce.trustAsHtml. To achieve this, I utilized a directive called compile-template which enables the use of ng-directives like ng-click and ng-disabled. While it is possible for me to pass sta ...

Azure Function App not recognizing TypeScript function

After executing npm run build to convert my TypeScript source code into JavaScript files, I then ran the below commands to deploy my TypeScript Azure Function successfully: func azure functionapp publish myFunctionApp However, upon completion of the comm ...

Implementing visibility toggles for objects in three.js using a graphical user interface

I am interested in controlling the visibility of objects in my scene through a button on a GUI. The following function currently hides/shows objects individually: g3white.traverse(function(child){child.visible = true;}); g3black.traverse(function(child){ ...

Express string declaration in a single TypeScript line

const restrictString = (str: string): string => str.match(/[ab]/g)?.join('') || '' Is there a way to restrict a string to only contain the characters 'a' and 'b' in a one-liner function? I am aware that this can ...

Is it possible to convert MUI components into strings on the client side?

I have incorporated the Material UI (MUI) library into my React application and am currently attempting to display certain components as PDF files directly in the browser. The approach I am taking involves: Creating a React element Rendering the React el ...

IE11 and how it handles Typescript and promises

Currently, I am utilizing Typescript version 2.4.2 along with Webpack for compilation purposes. Despite successful compilation, when running my code on IE11, an error 'Promise' is undefined arises. Below is a glimpse of my tsconfig: { "comp ...

Managing JavaScript promise rejections

What is the best approach to managing an error, such as the one labeled "new error" in the code snippet below, that occurs outside of a promise? function testError() { throw new Error("new error") // How can this error be properly handled? var p ...

Creating PopUp Windows with PHP and JavaScript

There is a function created on my page that opens a pop-up window when clicking on a game-mod name: <SCRIPT language="javascript" type="text/javascript"> function popModData( modName ) { var url = "./modList.php?mod=" + modName; ...

Alert for JavaScript Increment (++) Operation

While reviewing my code using jslint, I noticed a warning regarding the increment operator: var x = 1; x++; Warning: Unexpected expression '++' in statement position. According to the documentation: "They are second only to faulty archi ...