Converting JSON values to JSON keys with AngularJS

Question

Converting JSON values to JSON keys with AngularJS

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 displayed a list of my current technologies. I need to automatically select Angular JS and HTML from my variable myTech.

When I set

$scope.formData.selectedTechnologies = {'Angular JS':true, 'HTML':true};

it works correctly.

Can anyone advise me on how to convert ["Angular JS","HTML"] to {"Angular JS":true,"HTML":true}?

javascript angularjs

Answer 1

Answer №1

No conversion necessary for your JSON object

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

Simply update $scope.checkSelected

to the following

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

and modify your html like this

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

ECMAScript 2016 now has an include method for arrays

TRY IT OUT ON FIDDLE

UPDATE : using indexOf as suggested by @tanmay in comments

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

Answer 2

No conversion necessary for your JSON object

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

Simply update $scope.checkSelected

to the following

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

and modify your html like this

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

ECMAScript 2016 now has an include method for arrays

TRY IT OUT ON FIDDLE

UPDATE : using indexOf as suggested by @tanmay in comments

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

Answer 3

Answer №2

To generate such an array, you can utilize the elegant function known as reduce.

Here is an example:

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

Below is a functional code 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>

Answer 4

To generate such an array, you can utilize the elegant function known as reduce.

Here is an example:

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

Below is a functional code 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>

Answer 5

Answer №3

convert the given array to an object with key-value pairs using the map function.

var exampleApp = angular.module('myApp', []);
exampleApp.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>

Answer 6

convert the given array to an object with key-value pairs using the map function.

var exampleApp = angular.module('myApp', []);
exampleApp.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>

Converting JSON values to JSON keys with AngularJS

Answer №1

Answer №2

Answer №3

Similar questions

Using Backbone.sync to customize dataType

Integration of C++ Applications: Comparing RabbitMQ and NodeJS Addon

The functionality of socketio can only be activated within a function by utilizing the window.alert

Tips for transferring information from a React template to a Flask API

Guide on inserting random numbers into an array and calculating their total with ReactJs

Storing Dark Mode Preference in Local Storage using JavaScript

Implementing a CSS stylesheet that is triggered when the user reaches the top of the webpage, and incorporating an

A JavaScript JSON request that includes several specific parameters

Deactivate or Conceal certain ng-options within angularjs

Tips for programmatically setting an option as the chosen selection?

Ensure that you do not repeat the same action

I am looking to grasp the concept of the Conditional ternary statement

Leveraging nsIFilePicker.modeGetFolder in addon sdk

Top Method for Reloading Element-Specific JavaScript When Replacing Elements

Three.js: Modifying values within dat.GUI is not allowed

Bootstrap Carousel is still giving me trouble despite checking everything

After upgrading to version 4.0.0 of typescript-eslint/parser, why is eslint having trouble recognizing JSX or certain react @types as undefined?"

Attempting to use vue-test-utils-getting-started with the standard configuration results in a "Preset Not Found" error during

What is the best way to extract multiple return values from the $.post function in jQuery?

How to stop the default behavior of the tab key press in AngularJS