CODEWITHSUNDEEP
javascriptangularjs
Chinmay235
Chinmay235

Reputation: 3414

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

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} ?

Upvotes: 0

Views: 83

Answers (3)

Nishant123
Nishant123

Reputation: 1966

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;
    };

Upvotes: 4

Gaurav Chaudhary
Gaurav Chaudhary

Reputation: 1501

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>

Upvotes: 1

tanmay
tanmay

Reputation: 7911

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>

Upvotes: 2

Related Questions