All geek questions in one place

How to translate through javascript map using angular ng-repeat

I am developing an Angualr application where we have a Map object (as shown below). The key and value of the map object ( headerObj ) comes from the user as input to the application,

  var headerObj = new Map(); headerObj.set(key,value);

I iterate over them using foreach, as shown below, the output goes as expected

  $scope.inputHeaders.forEach(function (headerkey, headervalue) { console.log(headerkey, headervalue; });

but I have to show the values ​​of this map in a user interface that the user can edit again, so I linked them

  <li class="list-group-item" ng-repeat="header in inputHeaders"> <div ng-repeat="(key, value) in header"> {{key}} : {{value}} </div> </li>

I googled and tried several ways, but nothing helped, so basically I wanted to know how I can iterate over a map using forEach in angular?

Just for the sake of clarity, my requirement looks something like this: I need the values ​​to be transmitted to the server as a key, a pair of values, only if I'm not mistaken, suppose that if I use the properties of the object, the object key will be fixed somehow like

  {"key":"Content-Type","value":"application/x-www-form-urlencoded","$$hashKey":"003"}]

but my server is expecting something like

  "Content-Type" => "application/x-www-form-urlencoded"

Created editing plunkr http://plnkr.co/edit/t2g6Dl831HGyjD6uSdf3?p=preview

+7
source share
3 answers

AngularJS 1.x does not know how to use Javascript iterators, so you will need to first convert the Map object to an array using Array.from () .

Controller:

 $scope.inputHeadersArray = Array.from($scope.inputHeaders);

View:

 <li class="list-group-item" ng-repeat="header in inputHeadersArray"> {{header[0]}} : {{header[1]}} </li>
0
source

you can use:

[...headerObj] or [...headerObj.entries()] to get an array of two dimensions. and repeat them.

or [...headerObj.keys()] and [...headerObj.values()] for a regular array.

0
source

here are a few changes in your code. http://plnkr.co/edit/gpc1mPsZrl2QVXbnWZKA?p=preview

 app = angular.module('testDemo', []); app.controller('submitCtrl',function($scope) { $scope.header={}; $scope.inputHeaders=[]; $scope.addHeader = function() { $scope.inputHeaders.push($scope.header); $scope.header = {}; $scope.header.key=''; $scope.header.value=''; } $scope.log=function(){ //alert('in log'); $scope.inputHeaders.forEach(function (key, value) { console.log(key, value); }); } });

HTML:

 <body ng-controller='submitCtrl'> <div > <input type="text" class="=form-control" ng-model="header.key" placeholder="Key"> <input type="text" class="=form-control" ng-model="header.value" placeholder="value"> <button class="btn btn-sucess" ng-click="addHeader()">Add</button> <button class="btn btn-sucess" ng-click="log()">Log</button> <div> <ul class="list-group"> <li class="list-group-item" ng-repeat="header in inputHeaders"> <!-- need to to work on this logic --> <div ng-show="inputHeaders.length>=1"> <input type="text" ng-model="header.value" /> <input type="text" ng-model="header.key" /> </div> </li> </ul> </div> </div> </body>
-2
source

Source: https://habr.com/ru/post/979979/

More articles:


All Articles