What is the process for sending an http get request that provides a JSON array to populate an ngFor directive?

Question

What is the process for sending an http get request that provides a JSON array to populate an ngFor directive?

I'm trying to figure out how to make an http get request in order to retrieve a json array of data that I can use within an ngFor loop. The list that needs to be looped through is stored in this.list. Currently, the json file for testing purposes is located on my local machine. Despite looking through Angular 2 documentation and taking a udemy course, I am still struggling with this task. I have a feeling that the solution is simpler than I think.

This is the component containing the ngFor directive:

constructor(private router:Router, private rec:RecommendationsService ){}
      ngOnInit(){
        this.rec.getRecommendations().subscribe(
          data=>{
            this.x = JSON.stringify(data);
            alert(this.x);
            this.list = this.x;
          }
        );
      }

The http get request is handled within a service:

import 'rxjs/Rx';

@Injectable()
export class RecommendationsService{

  url="//Users/Daniel/Desktop/Reccomendations.json";

  constructor(private http:Http){};

  getRecommendations(){
    return this.http.get(this.url).map(res => res.json);
  }
}

Below is the ngfor code snippet where the data is needed:

 <div *ngFor="let item of list, let i = index" data-toggle="modal" data-target="#recModal">
                <div class="row rowTopBuffer rowDiv" (click)="toModal(item.name, item.description, item.recLocLat, item.recLocLong, item.picturePath)">
                    <div class="col-sm-12 col-md-4 titleDiv" >
                        <img class="recommendationImages img-responsive img-rounded" src={{item.picturePath}}>
                    </div>
                    <div class="col-sm-12 col-md-6 descDiv">

                    <p class="itemTitle">{{item.name}}</p>
                    <p id="{{desc+i}}">{{item.description}}</p>

                    </div>
                </div>
            </div>

Currently, when running this code, an EXCEPTION: [object Object] error is displayed in the console.

typescript angular angular2-http

Answer 1

Answer №1

Avoid converting the object to a string repeatedly, as you cannot iterate through a string :)

ngOnInit(){
    this.rec.getRecommendations().subscribe(
        data => {
            this.x = JSON.stringify(data);
            alert(this.x);
            this.list = data;
        },
        error => console.log(error),
        () => console.log("done")
    );
}

Additionally, remember to call the 'json()' method in your service like this:

getRecommendations(){
    return this.http.get(this.url).map(res => res.json());
}

Furthermore, make sure to correctly use ngFor in your template. Use ; instead of , when specifying the index.

*ngFor="let item of list; let i = index"

Answer 2

Avoid converting the object to a string repeatedly, as you cannot iterate through a string :)

ngOnInit(){
    this.rec.getRecommendations().subscribe(
        data => {
            this.x = JSON.stringify(data);
            alert(this.x);
            this.list = data;
        },
        error => console.log(error),
        () => console.log("done")
    );
}

Additionally, remember to call the 'json()' method in your service like this:

getRecommendations(){
    return this.http.get(this.url).map(res => res.json());
}

Furthermore, make sure to correctly use ngFor in your template. Use ; instead of , when specifying the index.

*ngFor="let item of list; let i = index"

Answer 3

Answer №2

Through my extended experience with Angular, I have gained valuable insights and wish to contribute an answer to this query. One option is to return the interface itself, while another is to return a class that incorporates the interface. Angular simplifies the deserialization process.

*************HTML

<div *ngFor="let employee of employees; let i = index;">
  <div>employee.Name</div>
  <div>employee.Id</div>
</div>

*************Typescript class and interface

export interface Employee{
  Id:number;
  Name:string;
}

export class ResponseEmployee implements Employee{
  Id:number;
  Name:string;
}

*************** Http service

@Injectable()
export class EmployeeHttpService {


  constructor(private http: Http) {}

  getEmployees(city:string){

    var headers = new Headers();
    headers.append("Content-Type", "application/json");

    var url = “/api/endpoint/path”;

    return this.http
      .get(url, {headers:headers})
      .toPromise()
      .then((res)=> res.json() as ResponseEmployee[]);

  }

}

**************** Component that uses employeeHttpService

@Component({
  selector: 'display-recommendations',
  templateUrl: './display-recommendations.component.html',
  styleUrls: ['./display-recommendations.component.sass']
})
export class DisplayEmployees implements OnInit {

  employees:ResponseEmployee[]=[];

  constructor(private employeeHttp:EmployeeHttpService){}

  ngOnInit() {

    this.employeeHttp.getEmployees()
      .then((data: ResponseEmployee[])=> {
        this.employees = data;
      })
      .catch((e:Error)=> this.handleError(e));
  }



}

Answer 4

Through my extended experience with Angular, I have gained valuable insights and wish to contribute an answer to this query. One option is to return the interface itself, while another is to return a class that incorporates the interface. Angular simplifies the deserialization process.

*************HTML

<div *ngFor="let employee of employees; let i = index;">
  <div>employee.Name</div>
  <div>employee.Id</div>
</div>

*************Typescript class and interface

export interface Employee{
  Id:number;
  Name:string;
}

export class ResponseEmployee implements Employee{
  Id:number;
  Name:string;
}

*************** Http service

@Injectable()
export class EmployeeHttpService {


  constructor(private http: Http) {}

  getEmployees(city:string){

    var headers = new Headers();
    headers.append("Content-Type", "application/json");

    var url = “/api/endpoint/path”;

    return this.http
      .get(url, {headers:headers})
      .toPromise()
      .then((res)=> res.json() as ResponseEmployee[]);

  }

}

**************** Component that uses employeeHttpService

@Component({
  selector: 'display-recommendations',
  templateUrl: './display-recommendations.component.html',
  styleUrls: ['./display-recommendations.component.sass']
})
export class DisplayEmployees implements OnInit {

  employees:ResponseEmployee[]=[];

  constructor(private employeeHttp:EmployeeHttpService){}

  ngOnInit() {

    this.employeeHttp.getEmployees()
      .then((data: ResponseEmployee[])=> {
        this.employees = data;
      })
      .catch((e:Error)=> this.handleError(e));
  }



}

What is the process for sending an http get request that provides a JSON array to populate an ngFor directive?

Answer №1

Answer №2

Similar questions

Introducing an extra 'pipe' in rxjs angular may result in generating errors

Creating an external link in Angular with query parameters

Redirect the user to the shop page in Angular 2 if they already have

Navigating in Angular 2.0.0-rc1 with routes and setting a default route using use

Is it possible to begin the vue root instance by using a .vue class component?

Tips for effectively handling the data received from a webservice when logging into a system

Display a button only when hovering over it

The revalidateTag and revalidatePath features in Next.js are currently not functioning as expected

Using Typescript in NextJS 13 application router, implement asynchronous fetching with async/await

Ways to pass styling properties to a nested component

Is it possible to set up TypeScript npm packages to be installed in their original TypeScript format rather than JavaScript for the purpose of examining the source code?

Disabling child FormControl in valueChanges is overlooked when enabling parent form

When a user clicks on the download link, it redirects them to the homepage in Angular

What steps are involved in implementing ts-transformer-keys in a Next.js project?

Invoke a function in Playwright exclusively when the test title includes a specific @tag

Creating a HMAC-SHA-256 signature in JavaScript for datatrans: A step-by-step guide

Tests in Angular2 are executed before the variables in compileComponents are initialized

Does a <Navigate> exist in the react-router-dom library?

Experiencing difficulties while attempting to install the Angular-cli tool and encountering errors

The data type 'Observable<any>' cannot be assigned to the type 'StoresSummaryResults'. The property 'Data' is not present in the 'Observable<any>' type