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;

split by '^' get you array

Grundy
– Grundy

2015-05-25 07:44:34 +00:00
Commented May 25, 2015 at 7:44 — Grundy
– Grundy, Commented May 25, 2015 at 7:44

Grundy · Accepted Answer · 2015-05-25 07:55:31Z

1

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>

edited May 25, 2015 at 7:55

answered May 25, 2015 at 7:47

Grundy

13.4k3 gold badges39 silver badges57 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Ethan Brown Over a year ago

You have map; I think you mean reduce

Grundy Over a year ago

@EthanBrown, yep, fix that, first i think OP need array instead object, but seems you need object

user3227295 · Accepted Answer · 2015-05-25 07:45:42Z

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;

answered May 25, 2015 at 7:45

user3227295

2,1561 gold badge13 silver badges17 bronze badges

Comments

Ethan Brown · Accepted Answer · 2015-05-25 07:56:11Z

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;
}, {});

Collectives™ on Stack Overflow

create a json object with own key and value using AngularJS

3 Answers 3

2 Comments

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

2 Comments

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related