Tips for inserting an object into an array

Question

Tips for inserting an object into an array

Here's the data I received:

{
0:{modifierId: 4, modifierName: 'Garlic',  modifierPrice: 60 }
1:{modifierId: 1, modifierName: 'Tartar ',  modifierPrice: 60}
2:{modifierId: 3, modifierName: 'Herb ',  modifierPrice: 60}
itemId:387
itemName:"BUFFALO WINGS"
itemPrice:500
itemQuantity:0
}

I have a project in angular focused on point of sale. The idea is that when a user clicks on an itemName button, it should show its modifiers in a dialog box. All this information is fetched from a restful API. When a modifier is clicked, its object is passed into the item's object. However, when trying to display the items in the cart using ngFor*, an error occurs. Angular does not support passing objects in ngFor*, as it only works with arrays.

The desired output is:

[
0:{modifierId: 4, modifierName: 'Garlic', modifierPrice: 60}
1:{modifierId: 1, modifierName: 'Tartar ',  modifierPrice: 60}
2:{modifierId: 3, modifierName: 'Herb ', modifierPrice: 60}
itemId:387
itemName:"BUFFALO WINGS"
itemPrice:500
itemQuantity:0
*length:3*
]

Now, the goal is to pass the modifier's object into an array. How can I achieve this?

javascript arrays angular typescript object

Answer 1

Answer №1

To ensure that your object is only casted as an array within the template, you can utilize the Angular keyvalue pipe:

<div *ngFor="let item of map | keyvalue">
      {{item.key}}:{{item.value}}
</div>

Alternatively, in your component, you have the option to convert your object into an array using the following method:

let arr = Object.keys(obj).map((k) => obj[k])

Answer 2

To ensure that your object is only casted as an array within the template, you can utilize the Angular keyvalue pipe:

<div *ngFor="let item of map | keyvalue">
      {{item.key}}:{{item.value}}
</div>

Alternatively, in your component, you have the option to convert your object into an array using the following method:

let arr = Object.keys(obj).map((k) => obj[k])

Answer 3

Answer №2

Perhaps you are in search of an object similar to this:

{
    itemId:387
    itemName:"BUFFALO WINGS"
    itemPrice:500
    itemQuantity:0,
    modifiers:[
       {modifierId: 4, modifierName: 'Garlic', modifierPrice: 60},
       {modifierId: 1, modifierName: 'Tartar ',  modifierPrice: 60},
       {modifierId: 3, modifierName: 'Herb ', modifierPrice: 60}
    ]
}

(the "length" can be found at newObject.modifier.length)

    newObject={
      itemId:original.itemId,
      itemName:original.itemName,
      itemPrice:original.itemPrice,
      itemQuantity:original.itemQuantity,
      modifiers:Object.keys(original)
            .filter((key:string)=>key.indexOf('item')<0)
            .map((key:string)=>original[key])
 }

Answer 4

Perhaps you are in search of an object similar to this:

{
    itemId:387
    itemName:"BUFFALO WINGS"
    itemPrice:500
    itemQuantity:0,
    modifiers:[
       {modifierId: 4, modifierName: 'Garlic', modifierPrice: 60},
       {modifierId: 1, modifierName: 'Tartar ',  modifierPrice: 60},
       {modifierId: 3, modifierName: 'Herb ', modifierPrice: 60}
    ]
}

(the "length" can be found at newObject.modifier.length)

    newObject={
      itemId:original.itemId,
      itemName:original.itemName,
      itemPrice:original.itemPrice,
      itemQuantity:original.itemQuantity,
      modifiers:Object.keys(original)
            .filter((key:string)=>key.indexOf('item')<0)
            .map((key:string)=>original[key])
 }

Tips for inserting an object into an array

Answer №1

Answer №2

Similar questions

Service injection in Angular 4 module not functioning properly even though it was declared at the module level

The outcome of the Javascript Calculator is showing as "Undefined"

Access all the properties of an object within a mongoose record

Error TS2339: Property does not exist on type 'object' - Typescript arrow function issue

Tips for creating Material UI elements using React and Typescript

Experiencing "localhost redirect loop due to NextJS Middleware" error

Linking chained functions for reuse of code in react-redux through mapStateToProps and mapDispatchToProps

At what point does a vulnerability in a React or Angular library become a serious threat?

What could be the reason my code isn't successfully performing addition within the input field?

Angular applications hosted on .Net Core should include a robots.txt file to provide instructions to web

When the input field is cleared, JavaScript will not be able to recognize its contents

Using Angular, you can effortlessly inject elements into the editable div from any location on the page

What is the best way to include attributes in an HTML element?

How can I eliminate the default background of Mui tooltip and personalize it in react?

How does the function window.open determine whether to open a new tab or switch to an existing tab based on specific criteria?

The set method of useState is not causing the specific component to render

What are some strategies for improving search efficiency in arrays containing over 50,000 elements?

How can I empty the value of a UI widget (such as an input field, select menu, or date picker) in Webix UI?

Exploring AngularJS for real-time updates from a persistent database

The cookie appears in the callback URL, but does not get stored in the browser's cookie storage