How to pair data from API using Angular

Question

I'm learning Angular and trying to GET data from an API. The data object looks like

        {
      "count": 11, 
      "docs": [
        {
          "@context": {
            "@vocab": "http://purl.org/dc/terms/", 
            "LCSH": "http://id.loc.gov/authorities/subjects", 
            "aggregatedDigitalResource": "dpla:aggregatedDigitalResource", 
            "begin": {
              "@id": "dpla:dateRangeStart", 
              "@type": "xsd:date"
            }, 
            "collection": "dpla:aggregation", 
            "coordinates": "dpla:coordinates", 
            "dataProvider": "edm:dataProvider", 
            "dpla": "http://dp.la/terms/", 
            "edm": "http://www.europeana.eu/schemas/edm/", 
            "end": {
              "@id": "dpla:dateRangeEnd", 
              "@type": "xsd:date"
            }, 
            "hasView": "edm:hasView", 
            "isShownAt": "edm:isShownAt", 
            "name": "xsd:string", 
            "object": "edm:object", 
            "originalRecord": "dpla:originalRecord", 
            "provider": "edm:provider", 
            "sourceResource": "edm:sourceResource", 
            "state": "dpla:state", 
            "stateLocatedIn": "dpla:stateLocatedIn"
          }, 
          "@id": "http://dp.la/api/items/2709fce6f5fd80225fef5083c86d4bac", 
          "_id": "virginia--uva-lib:1042454", 
          "_rev": "1-d7cf9de9b01e3856fcac1a6590f426db", 
          "collection": {
            "@id": "http://dp.la/api/collections/virginia--744806"
          }, 
          "dataProvider": "Special Collections, University of Virginia Library, Charlottesville, Va.", 
          "hasView": {
            "@id:": "http://fedoraproxy.lib.virginia.edu/fedora/objects/uva-lib:1042454/methods/djatoka:StaticSDef/getStaticImage", 
            "rights": [
              "For more information about the use of this material, please go to http://search.lib.virginia.edu/terms."
            ]
          }, 
          "id": "2709fce6f5fd80225fef5083c86d4bac", 
          "ingestDate": "2013-03-27T12:55:23.353010", 
          "ingestType": "item", 
          "isShownAt": "http://search.lib.virginia.edu/catalog/uva-lib:1042454", 
          "object": "http://fedoraproxy.lib.virginia.edu/fedora/objects/uva-lib:1042454/methods/djatoka:StaticSDef/getThumbnail", 
          "originalRecord": {
            ...

Here's more info: https://pro.dp.la/developers/responses

In my Angular code, my app-components are:

import { Component, OnInit } from '@angular/core';
import { HttpClient } from "@angular/common/http";

@Component({
 selector: 'app-root',
 templateUrl: './app.component.html',
 styleUrls: ['./app.component.scss']
})
export class ScholarAPIComponent {
   title = 'image-gallery';
   public data:any = []
   constructor(private http: HttpClient) {
     
   }
    getData(){
         const url ='https://api.dp.la/v2/items?q=probability&api_key=<<<<<obscured ffor privacy>>>>>'
         this.http.get(url).subscribe((res)=>{
           this.data.docs = res;
         })
       }

and my html is

     <div class="libro" *ngFor="let d of data">
  <div class="desc">{{d.id}}</div>
  <div >{{d.object}}</div>
 </div>

I'm not getting any output on the html page; however, when I console log the API data, I am getting it in the web browser console.

I think I'm not understanding how to work with this data structure and for example call individual elements of the object data structure from the API call to loop through them on my HTML doc.

Answer 1

In your getData() method, you are not correctly assigning the response to the component property. In your component, you have declared an array named data and the response of the API is an object with a docs array field.

This

this.http.get(url).subscribe((res)=>{
  this.data.docs = res;
})

should be

this.http.get(url).subscribe((res)=>{
  this.data = res.docs;
})