create a json object with own key and value using AngularJS

Question

i have some data in array. using these data to create a json object as my own key and my value. Here is my array

$scope.keyValue = ["personal^2", "Small^5", "Medium^7", "Large^9", "ExtraLarge^12"]

i want to push the key and value in another object. I tried to get the output like below.

 {
    "Personal" : 2
    "Small" : 5
    "Medium" : 7
    "Large" : 9
    "Extra Large" : 12
 }

Here my code.

var keyValue = ["personal^2", "Small^5", "Medium^7", "Large^9", "ExtraLarge^12"];
tempdata = [];
for(var i=0;i<keyValue.length;i++) {
    var key = keyValue[i].substr(0, keyValue[i].indexOf("^"));
    var value = keyValue[i].substr(keyValue[i].indexOf("^")+1);
    tempdata.push({key : value});        
}
$scope.array = tempdata;

Answer 1

    var keyValue = ["personal^2", "Small^5", "Medium^7", "Large^9", "ExtraLarge^12"];
tempdata = {};
for(var i=0;i<keyValue.length;i++) {
    var key = keyValue[i].split('^')[0];
    var value = keyValue[i].split('^')[1];
    tempdata[key]= value;        
}
$scope.array = tempdata;

Answer 2

You can use reduce like

var keyValue = ["personal^2", "Small^5", "Medium^7", "Large^9", "ExtraLarge^12"];
$scope.array = keyValue.reduce(function(acc, el) {
    var keyVal = el.split('^');
    acc[keyVal[0]] = keyVal[1];
    return acc;
}, {});

 angular.module('app', []) .controller('ctrl', function($scope) { var keyValue = ["personal^2", "Small^5", "Medium^7", "Large^9", "ExtraLarge^12"]; $scope.array = keyValue.reduce(function(acc, el) { var keyVal = el.split('^'); acc[keyVal[0]] = keyVal[1]; return acc; }, {}) }); 

 <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> <div ng-app="app" ng-controller="ctrl"> {{array}} </div> 

But if you need array of objects you can use map like

var keyValue = ["personal^2", "Small^5", "Medium^7", "Large^9", "ExtraLarge^12"];
$scope.array = keyValue.map(function(el) {
  var keyVal = el.split('^');
  var obj = {};
  obj[keyVal[0]] = keyVal[1];
  return obj;
});

 angular.module('app', []) .controller('ctrl', function($scope) { var keyValue = ["personal^2", "Small^5", "Medium^7", "Large^9", "ExtraLarge^12"]; $scope.array = keyValue.map(function(el) { var keyVal = el.split('^'); var obj = {}; obj[keyVal[0]] = keyVal[1]; return obj; }); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> <div ng-app="app" ng-controller="ctrl"> {{array}} </div> 

Answer 3

I think you would be better off using Array.prototype.reduce :

var arr_in = ["personal^2", "Small^5", "Medium^7", "Large^9", "ExtraLarge^12"];

var arr_out = arr_in.reduce(function(a,x) {
    var parts = x.split('^');
    a[parts[0]] = parts[1];
    return a;
}, {});

Array.prototype.reduce , as the name implies, is what you want to use when you want to take an array, and convert it to a single thing , such as a number or an object. For example, you could take an array of numbers and "reduce" them to their sum. Or, in your case, you take an array of strings that have a specific format and "reduce" them to an object with special keys.

Let's break down what's happening here The reduce function takes each element in the array, which is a string that looks like "key^value" , and it splits it on the ^ character. The a parameter (shorthand for "accumulator" - the single value you're reducing to, in this case, an object) is an object that will receive as a key, the key part of the string set to the value part of the string. Returning the accumulator ( return a; ) is just how the reduce function operates.

In your example, you show that "ExtraLarge" should result in the key "Extra Large" ; if that's really what you mean, you could make that a special case in the reduce function:

var arr_out = arr_in.reduce(function(a,x) {
    var parts = x.split('^');
    if(parts[0] === 'ExtraLarge') parts[0] = 'Extra Large';  // fix data
    a[parts[0]] = parts[1];
    return a;
}, {});