Creating an array with user-selected objects in IONIC 3

I've been attempting to separate the selected array provided by the user, but unfortunately, I'm having trouble isolating the individual elements. They are all just jumbled together.

My goal is to organize it in a format similar to the image linked below:

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

However, what I'm currently achieving is shown in the image below:

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

This is the relevant part of my code from the .ts file:

sub_item: any = [{
subcat_id: "",
value: "",
qty: ""
}];

constructor(...){
..
}

submitbtn(){
this.sub_item.push({
      subcat_id: this.sub_id,
      qty: this.quantity,
      value: this.addonId + "|" + this.addOnPrice + "|" + this.selectedAddOn
    });
}

I would greatly appreciate any assistance with this issue!

javascriptangularjsionic-frameworkionic3

Answer №1

The recommended method is as follows:

 sub_item: any = [{
 subcat_id: "",
 value: "",
 qty: ""
}];


this.sub_item[0].subcat_id = this.sub_id;
this.sub_item[0].qty = this.quantity;
this.sub_item[0].value = this.addOnPrice + "|" + this.selectedAddOn;

If you want to add another item, you can follow this example:

sub_item.push({
   subcat_id: 1,
   qty: 3,
   value: '101|102|Paneer'
})

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Errors in Chartist.js Data Types

I am currently using the Chartist library to monitor various metrics for a website, but I have encountered some challenges with the plotting process. The main errors that are appearing include: TypeError: a.series.map is not a function TypeError: d.normal ...

javascriptnode.jspugchartist.js

I'm having trouble getting my bot command handler to function properly

When it comes to my command handler, the commands function properly. However, when I attempt to include arguments like $user-info @user instead of just $user-info, it returns an error stating that the command is invalid. Code //handler const prefix = &ap ...

javascriptdiscord.js

Guidelines for showcasing a map on my website with the option for users to select a specific country

Is there a method to showcase a global map on my site and let the user select a country to receive relevant information? I am aware of embedding Google Maps, however, it includes unnecessary controls like zooming which I prefer not to inconvenience the us ...

javascripthtmlgoogle-mapsgoogle-maps-api-3

The method of altering a menu link in WordPress using jQuery varies according to whether the user is logged in or not

I need to update the last link on my menu. When a user is logged in, it should display a profile link; otherwise, it should show a sign-up link. ...

javascriptjquerycsswordpress

What is the best way to apply a specific style based on the book ID or card ID when a click event occurs on a specific card in vue.js

My latest project involves creating a page that displays a variety of books, with the data being fetched from a backend API and presented as cards. Each book card features two button sections: the first section includes "ADD TO BAG" and "WISHLIST" buttons ...

javascriptcssvue.jsvuejs2

Guide to Displaying HTTP POST Request Response on Pug Template

Whenever a user interacts with the form, I initiate an HTTP POST request to the database server. Subsequently, the database server sends a POST request back to the user's server. The issue I am facing is the inability to display this database result ...

javascriptnode.jsajaxhttprequestpug

Leveraging server.ts for Development with Angular 5 Universal

I decided to give the new Angular Universal Starter a try for my latest Angular 5 project. Instead of providing multiple options, they now only offer the Angular CLI version as a starting point. I've been able to successfully run my project in product ...

javascriptnode.jsangularexpressangular-universal

Is there a way to send map data using props in React?

I just want to store and pass the current props.url to the videomodal so I can show the same active video on the video modal. I can't use useState in the map. How can I pass it? Or is there any other solution? Videos.tsx ( props.url must be in the &l ...

javascriptreactjstypescriptnext.js

What is the best way to remove an item from an array?

I'm currently working on implementing a follow/unfollow feature on my page using React/Redux. However, I am struggling to fully grasp how to achieve this. When the user follows 'something', the reducer does the following: case FOLLOW_CITY: ...

javascriptreactjsredux

Displaying selected checkbox values in a URL with parameters using PHP and JavaScript

I am looking to extract the selected checkbox value and append it to the browser URL with a parameter name. Below is my HTML code: <div style="width:200px; float:left"> Price <div> <input type="checkbox" name="price" value="0-1 ...

javascriptphp

Ionic local notification plugin is experiencing an issue with the attachment propriety

We're currently developing a hybrid mobile application using Ionic 3 and Angular 4. Our focus right now is on integrating local notifications with attachments. Check out the documentation here This is the snippet of code we've experimented with ...

angularcordovaionic-frameworkionic-nativelocalnotification

Testing the angularjs controller with unit tests

After searching through numerous Stack Overflow posts, I am still unable to successfully run the unit test for my Angular controller. Error: TypeError: Object #<Object> has no method 'apply' Error: [ng:areq] Argument 'CorrMatrixCtrl& ...

angularjsunit-testingangular-ui-bootstrapangularjs-controller

I'm curious about the process behind this. Can I copy a Figma component from a website and transfer it into my

Check out this site for an example: Interested in how uikit.co/explore functions? By hovering over any file, a copy button will appear allowing you to easily paste it into your Figma artboard. Want to know how this works and how to implement it on your o ...

javascripthtmlcss

The absence of transpiled Typescript code "*.js" in imports

Here is an example of the code I am working with: User.ts ... import { UserFavoriteRoom } from "./UserFavoriteRoom.js"; import { Room } from "./Room.js"; import { Reservation } from "./Reservation.js"; import { Message } from ...

javascriptnode.jstypescriptecmascript-2020

Enter key not triggering submission in jQuery UI autocomplete field

I'm currently working on implementing the autocomplete feature following a tutorial, and while it's functioning, I'm facing an issue with submitting the form when the user selects an item and hits enter. Below is the Coffeescript code that I ...

javascriptruby-on-railsjquery-uiautocompletecoffeescript

Exploring the power of jQuery and Ajax together

Today seems to be one of those days where even the simplest tasks become a challenge. I'm sorry if this question has been asked before, but I'm struggling with a basic issue. I want to dynamically update text on a website using a text file, and w ...

javascriptjqueryajax

Selecting options using AngularJS to parse through a list

I am faced with a challenge involving a collection of strings representing years. Here is an example: $scope.years = ["2001", "2002", "2003", ...]; My goal is to display these values in a select tag within a web page. However, whenever I attempt this usi ...

javascripthtmlangularjsrepeat

Exploring the power of AngularJS and Jasmine: testing multiple instances of a service in action

Currently, I am immersing myself in the book "Mastering Web Application Development with AngularJS" and came across an example test named 'Aggregating callbacks.' The specific example causing me troubles involves the Person object: var Person = ...

javascriptangularjstddjasminejasmine-node

Thymeleaf not triggering JQuery click event

Currently working on a Spring Boot site where I have a list of elements, each containing a link. The goal is to trigger a javascript function when these links are clicked. <div class="col-sm-4" th:each="product : ${productsList}"> <!-- Code... ...

javascriptjqueryspring-bootthymeleaf

ES6 does not support two-way binding functionality

Let's take a look at this snippet of code: export class TestController { constructor() { this.socket = io(); this.movies = {}; this.socket.emit('getAllMovies', ''); this.socket.on('allMovi ...

javascriptangularjs