Retrieve values from JSON response, and create a drop-down

Question

I'm trying to get each of of the values inside my JSON file but when I run my API I get [Object Object] instead of what is inside the JSON.

This is my API request:

getAllvalues(): Observable<string[]> {
    return this.http
      .get<string[]>(this.Url + 'api');
  }

my component.ts

this.ddvService.getAllvalues()
      .subscribe(response => {
        this.slots = response;
        console.log (this.slots)
      });

Example of my JSON response:

[
    {
        "AB": "http:"
    },
    {
        "DE": "http:"
    },
    {
        "CE": "http:"
    },
    {
        "HI": "http:"
    }
]

How can I get the value inside the JSON, and create a dropdown box with each of them?

Answer 1

Your example JSON is a pretty bad example: each object in the array in the JSON should have at least somewhat matching key names. In your case, the keys are "AB", "DE", "CE", "HI" - all different, which is quite uncommon in real-life. A more realistic JSON response would have matching key names, eg:

[
    {
        "id": "1",
        "description": "Some description"
    },
    {
        "id": "2",
        "description": "Another description"
    }
]

Now to answer your questions:

You are getting [Object Object] because you are trying to use an entire object as a literal value. Instead, you should access the individual keys/values of an object. For example: console.log(slots[0].id) - this should output 1 .

Also, as indicated in the comments, replace Observable<string[]> with Observable<any[]> and get<string[]> with get<any[]> .

To create a drop-down in Angular, in your component template you can try this, assuming your slots value is the JSON above:

<select *ngIf="slots" name="slots">
  <option *ngFor="let slot of slots" value="slot.id">{{ slot.description }}</option>
</select>

Also, to print the entire object to console in a readable form, instead of just console.log(this.slots); , you can try console.log(JSON.stringify(this.slots));

Answer 2

As mentioned in the comments above it is not ideal to have json like you have, my assumption is you might want to log keys instead of values, since value is same for all the objects in array. In that case you might want to try something like this. 1. Add any[] instead string[].
2.Add nested for loop to console.log your object array.

    getAllvalues(): Observable<string[]> {
       return this.http
    .get<any[]>(this.Url + 'api');
     } 


   this.ddvService.getAllvalues()
     .subscribe(response => {
      this.slots = response;
      for(let i in this.slots)
       {
         let currentObj = this.slots[i]; // example of first in array { AB : "http:"} 
          for ( let z in currentObj ) 
            {
             if(currentObj[z]=== "http:")  // we are trying to find key instead value 
                {
                     console.log(z); // it will log AB, DE, CE, HI .. 
                }
             }
        } 
     });