Html Showing two objects

Question

Html Showing two objects

I am working with an object array that is being sent from an API. Right now, it is displaying the index position, but I actually want to display the object key and its corresponding value. I believe I may be mapping the object key incorrectly. Could anyone provide assistance with this issue?

getFav(): void {
                this.Shared.getFav().subscribe(

                data => {
                    this.fave = data.message;
                    Object.keys(this.fave).map((keyName) => {
                    return {id: keyName, product: this.fave[keyName]};
                    });
                }
                );
                }

<div class="uk-width-small" uk-dropdown>
                        <div class="uk-dropdown-grid uk-child-width-1-1@m" uk-grid>
                        <div *ngFor="let fav of fave | keyvalue" >
                            <span>{{fav.value}}</span>
                            <span>{{fav.key}}</span>
                        <a href="{{fav.key}}"><li>Buy On amazon<br/>
                        </li></a>
                    </div>
                </div>
            </div>

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

The current response from my API is showing the index positions. Do I need to make changes on the backend or can I adjust something on the frontend to only display the title key and its value? https://i.sstatic.net/wxDLD.png

angular typescript

Answer 1

Answer №1

When dealing with fav.value, remember that it is an object! You need to specify which key you want to retrieve, such as fav.value.id or fav.value.title

<div class="uk-width-small" uk-dropdown>
    <div class="uk-dropdown-grid uk-child-width-1-1@m" uk-grid>
        <div *ngFor="let fav of fave | keyvalue" >
            <span>{{fav.value.title}}</span>
            <span>{{fav.key}}</span>
            <a href="{{fav.key}}">
                <li>Buy On amazon<br/></li>
            </a>
        </div>
    </div>
</div>

Answer 2

When dealing with fav.value, remember that it is an object! You need to specify which key you want to retrieve, such as fav.value.id or fav.value.title

<div class="uk-width-small" uk-dropdown>
    <div class="uk-dropdown-grid uk-child-width-1-1@m" uk-grid>
        <div *ngFor="let fav of fave | keyvalue" >
            <span>{{fav.value.title}}</span>
            <span>{{fav.key}}</span>
            <a href="{{fav.key}}">
                <li>Buy On amazon<br/></li>
            </a>
        </div>
    </div>
</div>

Answer 3

Answer №2

One issue lies in your utilization of the Object.keys() method on the complete array, resulting in only the indexes and object being returned. To rectify this, you must apply it to each individual object within the array to achieve the desired outcome.

Answer 4

One issue lies in your utilization of the Object.keys() method on the complete array, resulting in only the indexes and object being returned. To rectify this, you must apply it to each individual object within the array to achieve the desired outcome.

Answer 5

Answer №3

Perhaps you should consider modifying the function getFav

let newFaves=[]; //declaring a global variable like this at the top of the ts file

getFav(): void {
  this.Shared.getFav().subscribe(
    data => {
      this.fave = data.message;
      this.newFaves =this.fave.map((item) => {
        return {id: item.id, product: item.title};
      });
    }
  );
 }

Next, in your HTML:

<div class="uk-width-small" uk-dropdown>
          <div class="uk-dropdown-grid uk-child-width-1-1@m" uk-grid>
          <div *ngFor="let fav of newFaves | keyvalue" >
            <span>{{fav.value}}</span>
            <span>{{fav.key}}</span>
      <a href="{{fav.key}}"><li>Buy On amazon<br/>
      </li></a>
    </div>
  </div>
</div>

Answer 6

Perhaps you should consider modifying the function getFav

let newFaves=[]; //declaring a global variable like this at the top of the ts file

getFav(): void {
  this.Shared.getFav().subscribe(
    data => {
      this.fave = data.message;
      this.newFaves =this.fave.map((item) => {
        return {id: item.id, product: item.title};
      });
    }
  );
 }

Next, in your HTML:

<div class="uk-width-small" uk-dropdown>
          <div class="uk-dropdown-grid uk-child-width-1-1@m" uk-grid>
          <div *ngFor="let fav of newFaves | keyvalue" >
            <span>{{fav.value}}</span>
            <span>{{fav.key}}</span>
      <a href="{{fav.key}}"><li>Buy On amazon<br/>
      </li></a>
    </div>
  </div>
</div>

Answer 7

Answer №4

Utilizing the keyvalue pipe eliminates the need to modify the getFav function.

The value extracted with the keyvalue pipe is an entire object

(for example: {id: 20, title: '...', image: '...'})

Therefore, you must specify which property you wish to access in Angular.

 <span>{{fav.value.id}}</span>
 <span>{{fav.value.title}}</span>
 <img [src]="fav.value.image"/>

Answer 8

Utilizing the keyvalue pipe eliminates the need to modify the getFav function.

The value extracted with the keyvalue pipe is an entire object

(for example: {id: 20, title: '...', image: '...'})

Therefore, you must specify which property you wish to access in Angular.

 <span>{{fav.value.id}}</span>
 <span>{{fav.value.title}}</span>
 <img [src]="fav.value.image"/>

Html Showing two objects

Answer №1

Answer №2

Answer №3

Answer №4

Similar questions

I am experiencing an issue in my Supabase project where user data from the authentication system is not being seamlessly integrated into the profiles table in real-time

`Navigating seamlessly across multiple Angular applications`

Transform JSON object to a class/interface object using Typescript

Implement the Promise return type for a function in Angular

When attempting to build the iOS app with Ionic, the error "Unable to access property toLowerCase of undefined" is

TypeScript Generic Extended React Component

Organizing string enum in Typescript and AngularJS - Tips and Tricks

What is the best way to reload a React/TypeScript page after submitting a POST request?

Checking if the Cursor is Currently Positioned on a Chart Element in Word Addin/OfficeJS

Issues with style not loading properly within innerHTML in Angular2

When building with Angular using the "ng build" command, the JavaScript file names are altered

Accessing an external API through a tRPC endpoint (tRPC Promise is resolved before processing is complete)

Issues with Typescript function overloads when dealing with union types

The tab title will be invisible if it is located within the second Angular component

`What specific type should be assigned to the custom styled input component in MUI?`

When using TypeScript, a custom property name within a type declaration must explicitly point to a predefined symbol

adjusting state with React hooks

Error encountered when attempting to retrieve token from firebase for messaging

Each time the Angular children component is reloaded, the user is redirected to localhost:4200

Incorporating a skeletal design effect into a table featuring sorting and pagination options