Angular JS - 如何将JSON值转换为JSON密钥？

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>

我已经发布了一些我的现有技术的上市。我想要默认选择Angular JS和HTML，它存在于我的myTech变量中。

如果我写$scope.formData.selectedTechnologies = {'Angular JS':true, 'HTML':true};我得到正确的输出。

请教我如何将["Angular JS","HTML"]转换为{"Angular JS":true,"HTML":true}？

来源

2017-04-12 Chinmay235

要创建这样的数组，你可以使用这个叫做reduce美丽的功能。

像这样：

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

这里的工作片段：

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>

来源

2017-04-12 05:35:15 tanmay

谢谢tanmay。你的代码工作正常。我有一点变化，但总体而言，您的代码适合我的答案。我接受这个答案。再次感谢... – Chinmay235

使用地图函数将您的数组转换为具有键值对的对象。

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>

来源

2017-04-12 05:26:24

请描述你只是改变 – mplungjan

您手动更改'var myTech = {“myTechnology”：{“Angular JS”：true，“HTML”：true}};'但是t他的价值是动态的。如何通过编程方式将'[“Angular JS”，“HTML”]'更改为'{“Angular JS”：true，“HTML”：true}'？ – Chinmay235

@ Chinmay235修改了它。那是你在找什么？ –

你可以做类似如下：

var myTech = {"myTechnology":["Angular JS","HTML"]}; 
 
var myTechArr = myTech.myTechnology; 
 
var myTectObj = {}; 
 
myTechArr.forEach(function(item, i){ 
 
    myTectObj[item] = true; 
 
}); 
 
console.log(myTectObj);

来源

2017-04-12 05:39:12 Mamun

无需转换您的JSON对象

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

只要改变你的$scope.checkSelected

这个

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

和你的HTML这个

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

的ECMAScript 2016包括阵列

的include方法DEMO FIDDLE

编辑：使用indexOf由@tanmay在评论中说

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

来源

2017-04-12 05:41:28 Nishant123

..这只适用于现代浏览器（40+），不支持IE – tanmay

在这种情况下，您可以添加polyfill或将其更改为'indexOf'。这比操纵动态创建的数组更好，因为它可以被使用，因为它是 – Nishant123

是的，好的旧'indexOf'将在不编码时用于乐趣：D – tanmay

Angular JS - 如何将JSON值转换为JSON密钥？

回答

相关问题