0

This is array of array data in a variable 'data'. I would like to convert array of array data to JSON using AngularJS and use in View using $scope object

$scope.data =[["Name", "Age", "Address"],
               [ "A", "43", "CA" ],
               [ "B", "23", "VA" ],
               [ "C", "24", "NY" ]]

Function wrote to convert array of array to JSON:

$scope.jsonData = function () {
            var result = [];
            var keys = data[0];

            for (var i = 1; i < data.length; i++) {
                var item = {};
                item[keys[0]] = data[i][0];
                item[keys[1]] = data[i][1];
                item[keys[2]] = data[i][2];
                result.push(item);
            }
return result
        };

I am not seeing JSON output, where am I doing wrong?

Desired Output:

[
  {
    "Name": "A",
    "Age": "43",
    "Address": "CA"
  },
  {
    "Name": "B",
    "Age": "23",
    "Address": "VA"
  },
  {
    "Name": "C",
    "Age": "24",
    "Address": "NY"
  }
]
1
  • 1
    You can directly use JSON.stringify($scope.data). Commented Mar 20, 2017 at 17:08

4 Answers 4

0

You are missing $scope infront of data,

 for (var i = 1; i < $scope.data.length; i++) {
    var item = {};
    item[keys[0]] = $scope.data[i][0];
    item[keys[1]] = $scope.data[i][1];
    item[keys[2]] = $scope.data[i][2];
    $scope.result.push(item);
 }

DEMO

var demoApp = angular.module('demoApp', []);
 var controllers = {};
 controllers.SimpleController = function ($scope) {
 $scope.data =[["Name", "Age", "Address"],
               [ "A", "43", "CA" ],
               [ "B", "23", "VA" ],
               [ "C", "24", "NY" ]];
               $scope.result = [];
  $scope.jsonData = function () {
            var result = [];
            var keys = $scope.data[0];

            for (var i = 1; i < $scope.data.length; i++) {
                var item = {};
                item[keys[0]] = $scope.data[i][0];
                item[keys[1]] = $scope.data[i][1];
                item[keys[2]] = $scope.data[i][2];
                 $scope.result.push(item);
            }
            console.log($scope.result);
 };          
               
};
demoApp.controller(controllers);
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.5/angular.min.js"></script>
<div ng-app="demoApp" ng-controller="SimpleController">
 <div ng-init="jsonData()">
  
</div>
</div>

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

Comments

0

Solution from how-to-convert-array-of-arrays-to-json.

Using Array.prototype.slice(), Array.prototype.map() and Array.prototype.forEach():

let arrays = [
 ["Name", "Age", "Address"],
 ["A", "43", "CA"],
 ["B", "23", "VA"],
 ["C", "24", "NY"]
];

let keys = arrays[0];
let values = arrays.slice(1);
let objects = values.map(array => {
let object = {};

keys.forEach((key, i) => object[key] = array[i]);

return object;
});

console.log(JSON.stringify(objects)); 

Comments

0

Based on you array structure i think you want them displayed nicely, so i would make the html like this:

<ul>
  <li ng-repeat="c in contacts track by $index">
       <h3>c.Name</h3>
       <h3>c.Age</h3>
       <h3>c.Address</h3>
  </li>
</ul>

And in you javascript ( Angular) part :

var generateArray = function () {
        var result = [];
        var keys = data[0];

        for (var i = 1; i < data.length; i++) {
            var item = {};
            item[keys[0]] = data[i][0];
            item[keys[1]] = data[i][1];
            item[keys[2]] = data[i][2];
            result.push(item);
        }
        return result
        };

$scope.contacts = generateArray();

Comments

0

You missed scope value.. so, add scope data, and use following structure...

      $scope.jsonData = function () {
        var result = [];
        var keys = $scope.data[0];

        for (var i = 1; i <  $scope.data.length; i++) {
            var item = {};
            var data =  $scope.data[i];
            item[keys[0]] = data[0];
            item[keys[1]] = data[1];
            item[keys[2]] = data[2];
            result.push(item);
        }
    };

Comments

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.