Angular JS - How to convert JSON value to JSON key?

Question

var demoApp = angular.module('myApp', []);
demoApp.controller('MyController', function($scope, $http) {
    $scope.formData = {};
    $scope.formData.selectedTechnologies = {};

    $scope.checkSelected = function(object) {
        return Object.keys(object).some(function(key) {
            return object[key];
        });
    };

    $scope.technologies = [
      {id:1, name:'Angular JS'},
      {id:2, name:'PHP'},
      {id:3, name:'HTML'},
      {id:4, name:'JAVA'},
      {id:5, name:'CSS'},
      {id:6, name:'DOTNET'}
    ];
    
    //$scope.formData.selectedTechnologies = {'Angular JS':true, 'HTML':true}; /* This is working fine */
    
    var myTech = {"myTechnology":["Angular JS","HTML"]}; /* This is dynamic  value */
    $scope.formData.selectedTechnologies = myTech.myTechnology;
});

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>


<body ng-app="myApp">
<h2>Technologies</h2>
<div ng-controller="MyController">
<form name="projectForm" novalidate ng-submit="projectForm.$valid && submitForm()">
<div class="col-sm-3" ng-repeat="technology in technologies">
<div class="checkbox checkbox-info checkbox-inline">
<input type="checkbox" name="technology_name" ng-model="formData.selectedTechnologies[technology.name]" id="technology{{$index}}" ng-required="!checkSelected(formData.selectedTechnologies)" />
<label for="technology{{$index}}" ng-bind="technology.name"></label>
<div class="col-lg-12" ng-show="projectForm.$submitted || projectForm.technology_name.$touched">
   <span ng-show="projectForm.technology_name.$error.required" class="text-danger">Select any technology.</span>
</div>
</div>
</div>
</form>
</div>
</body>

I have posted some listed of my existing technology. I want to default select Angular JS and HTML which is exist in my myTech variable.

If I write $scope.formData.selectedTechnologies = {'Angular JS':true, 'HTML':true}; I got correct output.

Please suggest me how to convert ["Angular JS","HTML"] to {"Angular JS":true,"HTML":true} ?

Nishant123 · Accepted Answer · 2017-04-12 06:24:48Z

4

There is no need to convert your JSON object

var myTech = {
    "myTechnology": ["Angular JS", "HTML"]
  };

Just change your $scope.checkSelected

to this

$scope.checkSelected = function(object) {
        return $scope.formData.selectedTechnologies.includes(object.name);
    };

and your html to this

<input type="checkbox" name="technology_name" ng-model="formData.selectedTechnologies[technology.name]" id="technology{{$index}}" ng-checked="checkSelected(technology)" />

ECMAScript 2016 includes an include method for arrays

DEMO FIDDLE

EDIT : using indexOf as said by @tanmay in comments

$scope.checkSelected = function(object) {
        return $scope.formData.selectedTechnologies.indexOf(object.name) != -1;
    };

edited Apr 12, 2017 at 6:24

answered Apr 12, 2017 at 5:41

Nishant123

1,9662 gold badges28 silver badges46 bronze badges

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

3 Comments

tanmay Over a year ago

..which only works in modern browsers (40+), no support in IE

Nishant123 Over a year ago

You can either add polyfills or change it to indexOf in that case. This is anyway better than manipulating dynamically created array which can be used as it is

tanmay Over a year ago

yeah good old indexOf is to go when not coding just for fun :D

tanmay · Accepted Answer · 2017-04-12 05:35:15Z

To create such array, you can use this beautiful function called reduce.

Like this:

$scope.formData
  .selectedTechnologies = myTech.myTechnology.reduce(function(arr, tech) {
    arr[tech] = true;
    return arr;
  }, []);

Here's working snippet:

var demoApp = angular.module('myApp', []);
demoApp.controller('MyController', function($scope, $http) {
  $scope.formData = {};
  $scope.formData.selectedTechnologies = {};
  $scope.technologies = [{
      id: 1,
      name: 'Angular JS'
    },
    {
      id: 2,
      name: 'PHP'
    },
    {
      id: 3,
      name: 'HTML'
    },
    {
      id: 4,
      name: 'JAVA'
    },
    {
      id: 5,
      name: 'CSS'
    },
    {
      id: 6,
      name: 'DOTNET'
    }
  ]

  var myTech = {
    "myTechnology": ["Angular JS", "HTML"]
  };
  $scope.formData
  .selectedTechnologies = myTech.myTechnology.reduce(function(arr, tech) {
    arr[tech] = true;
    return arr;
  }, []);
});

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>


<body ng-app="myApp">
  <h2>Technologies</h2>
  <div ng-controller="MyController">
    <div class="col-sm-3" ng-repeat="technology in technologies">
      <div class="checkbox checkbox-info checkbox-inline">
        <input type="checkbox" name="technology_name" ng-model="formData.selectedTechnologies[technology.name]" id="technology{{$index}}" ng-required="!checkSelected(formData.selectedTechnologies)" />
        <label for="technology{{$index}}" ng-bind="technology.name"></label>
      </div>
    </div>
  </div>
</body>

Thanks tanmay. Your code working fine. I have little bit change but overall your code is fit for my answer. I accept this answer. Thanks again...

Gaurav Chaudhary · Accepted Answer · 2017-04-12 05:38:49Z

1

change your array into an object with key-value pairs using map function.

var demoApp = angular.module('myApp', []);
demoApp.controller('MyController', function($scope, $http) {
    $scope.formData = {};
    $scope.formData.selectedTechnologies = {};
    $scope.technologies = [
      {id:1, name:'Angular JS'},
      {id:2, name:'PHP'},
      {id:3, name:'HTML'},
      {id:4, name:'JAVA'},
      {id:5, name:'CSS'},
      {id:6, name:'DOTNET'}
    ]
    
    var myTech = {"myTechnology":["Angular JS","HTML"]};
    var defaultTechnologies ={}
    defaultTechnologies = Object.assign(...myTech.myTechnology.map(d => ({[d]:true})))
    $scope.formData.selectedTechnologies = defaultTechnologies;
});

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>


<body ng-app="myApp">
<h2>Technologies</h2>
<div ng-controller="MyController">
<div class="col-sm-3" ng-repeat="technology in technologies">
<div class="checkbox checkbox-info checkbox-inline">
<input type="checkbox" name="technology_name" ng-model="formData.selectedTechnologies[technology.name]" id="technology{{$index}}" ng-required="!checkSelected(formData.selectedTechnologies)" />
<label for="technology{{$index}}" ng-bind="technology.name"></label>
</div>
</div>
</div>
</body>

edited Apr 12, 2017 at 5:38

answered Apr 12, 2017 at 5:26

Gaurav Chaudhary

1,50115 silver badges28 bronze badges

3 Comments

mplungjan Over a year ago

Please describe what you changed

Chinmay235 Over a year ago

You just change manually var myTech = {"myTechnology":{"Angular JS":true,"HTML":true}}; But this value is dynamic. How to change ["Angular JS","HTML"] to {"Angular JS":true,"HTML":true} through programmatically?

Gaurav Chaudhary Over a year ago

@Chinmay235 Revised it. Is that what you are looking for?

Collectives™ on Stack Overflow

Angular JS - How to convert JSON value to JSON key?

3 Answers 3

3 Comments

1 Comment

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

3 Comments

1 Comment

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related