Changing object into an array for ng-repeat with angularjs

Upon initialization, I define two global variables: 

var DiscountRef = {}; var shareDetail = [];
. When a user adds information via a form, all values are stored in the DiscountRef variable like so: 

RefValue = {Mobile:9876543210, Quantity:3}
$scope.shareDetail = Object.keys(RefValue); //I also attempted Object.entries

When attempting to display this data in a table:

{{shareDetail}}
<div ng-repeat="share in shareDetail">
  {{share.Mobile}}
  {{share.Quantity}}
 
</div>

An empty array is displayed.

I have also tried:

 <div ng-repeat="(key, value) in shareDetail">
    {{key}} : {{value}}
 </div>

This method provides results. How can I specifically access key-value pairs such as MobileNo: 9876543210 and Quantity: 3?

javascriptangularjs

Answer №1

$scope.data = {Phone:1234567890,Quantity:5};
$scope.detailsList = [];
Object.keys($scope.data).forEach(function(key, value)
{
    $scope.detailsList.push({"item": key, "value": $scope.data[key]});
});

After that, you can utilize ng-repeat:

<div ng-repeat="(key, item) in detailsList">      
    {{item.item}} : {{item.value}}
</div>

Many thanks

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

The form is not registering keypress events

Currently facing an issue with this piece of code: <form> <div class="searchBarDiv"> <input class="searchBar" id="search" type="search" placeholder="Search" onkeypress="search();"> </div> </form> The search(); fun ...

javascriptjqueryhtmlcordova

Tips for maintaining line breaks in a textarea during a POST request

I have a textarea in my web page that passes its value to PHP using the POST method. The issue is, when the value with line breaks is written into a file, the line breaks are not preserved. It seems like the "\n" characters are being removed from the ...

javascriptphpnewline

Attempting to employ the HTML5 file picker feature within the AppMaker platform

Hey there, I'm currently working on integrating the HTML5 file picker into my AppMaker app. (Since my app needs to run as the developer, I can't use Drive Picker). I've been able to display the file picker in an HTML widget using the follow ...

javascripthtmlgoogle-app-maker

Unable to utilize a function within a mongoose schema

I encountered an issue while attempting to access the schema methods of a mongoose schema in TypeScript. Schema const userSchema: Schema<IUser> = new Schema( { name: { type: String, required: [true, "Name is required"], ...

javascriptnode.jsexpressmongoosemongoose-schema

Issue with jQuery datepicker not closing on Internet Explorer 11

In Chrome, the code snippet provided below is functional. However, in IE11 it fails to work: $('.datepicker').datepicker({ onClose: function () { this.focus() } }); http://jsfiddle.net/arunpjohny/A8e55/ The objective is to navigate to the ...

javascriptjquery

The ArrowHelper in THREE.js seems to be ignoring the natural rotation provided by Euler angles

Can someone help me with setting intrinsic rotations to a THREE.ArrowHelper in THREE.js? I'm trying to work with Tait-Bryan euler angles for 3D rotations. In the snippet below, I define a unit vector for the x-axis as THREE.Vector3(1, 0, 0). Then, I ...

javascriptthree.js

How can I assign a distinct background color to individual sections in Chart.js?

Wanting to Customize Grid Background Colors in Line Chart using react-chartjs-2 I am looking to have different background colors for each grid in my Line chart. Is this functionality possible with the react-chartjs-2 library? This is the desired appearan ...

javascriptcssreactjscanvaschart.js

Transferring information among PHP web pages using a list generated on-the-fly

I am working with a PHP code that dynamically generates a list within a form using data from a database: echo '<form name="List" action="checkList.php" method="post">'; while($rows=mysqli_fetch_array($sql)) { echo "<input type='pas ...

phpjavascriptjquery

The medium-zoom feature is currently experiencing issues with functionality within Angular version 13

I've been attempting to incorporate medium-zoom functionality into my project using https://www.npmjs.com/package/medium-zoom Here are the steps I took: ng new medium_zoom_test (Angular 13) with routing & css npm install medium-zoom The image is ...

javascriptangular

The image is not appearing on mobile devices, but it is displaying correctly on desktop computers

Having trouble with my landing page on compare.comxa.com. When I try to view it on my Android device, only the form shows up and the background image is nowhere to be found. Can anyone help me troubleshoot this issue? Here is the code: ...

javascripthtmlcsstwitter-bootstrapfrontend

The interface remains static even after the property has been modified

There is a function in my codebase called getData() that fetches data from an API. I am trying to call this function from a different component, which I will refer to as MainComponent and AnotherComponent for the sake of clarity: import MainComponent from ...

javascriptangulartypescript

Utilizing the power of AWS Lambda in conjunction with moment JS to generate unique

My current time zone is GMT+8, and the AWS region I am using is Singapore (ap-southeast-1). I am facing an issue where there are discrepancies in date calculations between my local machine and when I deploy my code on AWS Lambda. My goal is to ensure that ...

javascriptnode.jsaws-lambda

Console.log is displaying array as [object Object] when utilizing Typescript

When working with an object in typescript called "obj," I encountered a strange behavior. Initially, when I ran the console.log(obj); command, the output in the terminal console was displayed as [object Object]. However, after wrapping it in JSON.stringify ...

javascriptnode.jstypescript

Dynamically update a dropdown menu with options based on the user's selection from a prior dropdown list using ajax and JSP Servlet

I am working on creating a real-time project for a consultancy and could use some assistance with developing a JSP page. Specifically, I need to allow the user to select a Client (Company name) from a dropdown list. Once a Client is selected, the HR list ...

javascriptjqueryajaxjspservlets

Using InvokeScript with a WPF browser application

Can someone explain why I'm encountering the error (Exception from HRESULT: 0x80020006 (DISP_E_UNKNOWNNAME)) when trying to call a javascript function in a WPF application (.Net 4)? The application hosts a browser control and utilizes local html file ...

c#javascriptwpfwebbrowser-control

After initiating my development server with npm start, I came across an unexpected error. Can anyone lend a hand in resolving this issue, please

Encountered Compilation Error Error: Unable to compile module './ControlPointDuplicateRounded' in 'C:\Users\Archit\Desktop\marketstore-react\node_modules\@material-ui\icons\esm' Is there anyone a ...

javascriptreactjs

Typescript Tooltip for eCharts

I'm working on customizing the tooltip in eChart v5.0.2 using Typescript, but I'm encountering an error related to the formatter that I can't seem to resolve. The error message regarding the function keyword is as follows: Type '(param ...

javascripttypescriptecharts

Directive fails to trigger following modification of textarea model

There is a block of text containing newline separators and URLs: In the first row\n you can Find me at http://www.example.com and also\n at http://stackoverflow.com. The goal is to update the values in ng-repeat after clicking the copy button. ...

javascriptangularjsangularjs-directive

Executing AngularJS - Ensuring an asynchronous function completes before submitting a form

I am trying to execute an angular function before the user is directed to the payment provider. The form for the payment provider appears as follows: <form action="UrlToPaymentProvider" method="POST"> <input type="hidden" name="formKeys /> ...

javascriptangularjspostform-submitng-submit

Error message "Attempting to modify headers after they have been sent to the client" following a POST request

Can someone help me with a strange error I'm encountering? I am using Express and Node.js to host a service on Heroku. Below is the code from my route controller: async function PopupConroller(req, res) { let credential = req.credential; ...

javascriptnode.jsexpress