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>

私は私の既存の技術のいくつかの上場を掲載しています。私はmyTech変数に存在するAngular JSとHTMLを選択してデフォルトにします。

$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}}; 'しかし、彼の価値はダイナミックです。 "[" 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

のECMAScript 2016は、アレイ用include方法

DEMO FIDDLE

が含まEDIT：@tanmayで言ったようにindexOfを使用して、コメント

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

出典

2017-04-12 05:41:28 Nishant123

..最新のブラウザ（40+）でしか動作しません。IEでのサポートはありません – tanmay

この場合、ポリフィルを追加するか、それを 'indexOf'に変更することができます。これはとにかく動的に作成された配列を操作するよりも優れています。 – Nishant123

うまく古い 'indexOf'はちょうど楽しみのためにコーディングしないときに行くことです：D – tanmay

Angular JS - JSON値をJSONキーに変換するにはどうすればいいですか？

答えて

関連する問題