As I work on developing my Angular application, I encounter a situation where I have a Map object with keys and values (as demonstrated below). These key-value pairs in the map object (headerObj) are provided by the user as input to the application.
var headerObj = new Map();
headerObj.set(key, value);
I iterate through these pairs using a forEach loop, and the output is as expected:
$scope.inputHeaders.forEach(function (headerkey, headervalue) {
console.log(headerkey, headervalue);
});
However, I need to display these map values in the UI, allowing users to edit them. Therefore, I bind the values accordingly:
<li class="list-group-item" ng-repeat="header in inputHeaders">
<div ng-repeat="(key, value) in header">
{{key}} : {{value}}
</div>
</li>
I have tried various methods by searching online, but none have been successful. I am particularly interested in learning how to iterate over a map using forEach in Angular.
To provide more context, my requirement is to pass values to the server in a key-value pair format. If I use object properties, the key of the object remains fixed, which is not suitable for my server's expectations. For example:
{"key":"Content-Type","value":"application/x-www-form-urlencoded","$$hashKey":"003"}]
On the other hand, my server expects a format like this:
"Content-Type" => "application/x-www-form-urlencoded"
I have created a Plunkr example for editing purposes: http://plnkr.co/edit/t2g6Dl831HGyjD6uSdf3?p=preview