преобразование Javascript массива из входного флажка

Question

У меня есть несколько входных checkbox сек, созданных из model с угловой помощью ng-repeat, когда я выбираю некоторые из них я получаю это:

var accounts = [{'AA764':true}, {'AA324': true}, {'AA234': false}, {'AA553': true}, {'AA7365': false}]; 

Но мне нужно следующая структуру для управления контроллером что вызовы и REST API:

var accounts = ['AA764', 'AA324', 'AA553']; 

Именно эти checkboxe s, которые выбраны, я попытался с яваскрипта foreach функции, но я не могу заставить его работать. Есть ли библиотека для углового или, может быть, с беседкой, которая может мне помочь?

Спасибо.

Answer 1

попробуйте этот код, я использую библиотеку lodash здесь:

var accounts = [{'AA764':true}, {'AA324': true}, {'AA234': false}, {'AA553': true}, {'AA7365': false}]; 
_.compact(accounts.map(transform)); 

function transform(item) { 
    var prop = Object.keys(item)[0]; 
    return item[prop] ? prop : false; 
} 

Answer 2

Вы можете использовать библиотеку под названием Lodash. Это библиотека утилиты, которая предоставляет множество функций для выполнения таких задач, как эта простая. Хотя это можно сделать с использованием чистого JS, я буду использовать эту библиотеку, учитывая ее удобство использования в других сценариях.

Вы можете использовать это:

var accounts = [{'AA764':true},{ 'AA324': true},{ 'AA234': false},{ 'AA553': true}, {'AA7365': false}]; 
 
var a =_.filter(_.map(accounts, function(item){ 
 
    return _.findKey(item); 
 
}),undefined); 
 
console.log(a);

<script src="http://gh-canon.github.io/stack-snippet-console/console.min.js"></script> 
 
<script src="https://cdn.jsdelivr.net/lodash/4.5.1/lodash.min.js"></script>

Результат:

Эта функция перебирает объекта и создает массив, содержащий только ключи в объекте . Для получения дополнительной информации о функции:

https://lodash.com/docs#findKey

https://lodash.com/docs#map

https://lodash.com/docs#filter

Вы можете включать в себя библиотеку из CDN (https://cdn.jsdelivr.net/lodash/4.5.1/lodash.min.js) или скачать и использовать его как обычный сценарий. Lodash предлагает множество полезных функций утилиты, что значительно упрощает программирование JS. Тебе лучше попробовать.

Answer 3

Если вы хотите пойти на библиотеку, Очень полезно один здесь Check-list model

Или Делайте это с таким образом!

angular.module('app', []) 
 
.controller('Ctrl', function($scope){ 
 
    $scope.accounts = {AA324: false, AA234: false, AA553: false, AA764: true }; 
 
    $scope.showBeforeSendingRestAPI = function(){ 
 
    var res = []; 
 
    for(var i in $scope.accounts){ 
 
     if($scope.accounts[i]) 
 
     res.push(i); 
 
    } 
 
    return res; 
 
    } 
 
    
 
    });

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

 
<div ng-app='app' ng-controller="Ctrl"> 
 
    <label ng-repeat="(account, checked) in accounts"> 
 
     <input type="checkbox" ng-model="accounts[account]" />   {{account}} 
 
    </label> 
 
    <p>Accounts: {{showBeforeSendingRestAPI()}}</p> 
 
</div>

Answer 4

Я думаю, что это может помочь вам:

var accounts = [{'AA764':true},{ 'AA324': true},{ 'AA234': false},{ 'AA553': true}, {'AA7365': false}]; 

// Get selected objects 
function getSelected(accounts){ 

    var ans = []; 

    // Looping through array 
    for(var i = 0; i < accounts.length; i++){ 

     var item = accounts[i]; 

     // Looping over object dynamic property 
     for(var prop in item){ 
      if(item.hasOwnProperty(prop)){ 

       // if property is true then add it to the answer array 
       if(item[prop] === true){ 
        // Add item to the answer array 
        ans.push(item); 
       } 
      } 
     }    
    } 

    return ans; 
} 

console.log(getSelected(accounts)); // Here you may see the answer 

Как вы можете видеть выше, это цикл через массив объектов, затем пробегает по свойствам объектов (только один) и проверить, установлено ли это свойство true и добавить его в массив ответов.

Answer 5

Если вы не возражаете против использования библиотеки, jQuery.map() хорошо работает для этого:

var accounts = [{'AA764':true}, {'AA324': true}, {'AA234': false}, {'AA553': true}, {'AA7365': false}]; 
 
var trueAccounts = $.map(accounts, function(item) { 
 
    var key = Object.keys(item)[0]; 
 
    if (item[key]) 
 
    return key; 
 
    else 
 
    return null; 
 
}); 
 
console.log(trueAccounts);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

Или, чтобы сделать это в прямом JavaScript вы можете комбинировать Array.filter() с Array.map():

var accounts = [{'AA764':true}, {'AA324': true}, {'AA234': false}, {'AA553': true}, {'AA7365': false}]; 
 
var trueAccounts = accounts.filter(function(item) { 
 
    var key = Object.keys(item)[0]; 
 
    return item[key]; 
 
}).map(function(item) { 
 
    return Object.keys(item)[0]; 
 
}); 
 
console.log(trueAccounts);

Answer 6

Это простое и быстрое решение:

// Input values 
 
var accounts = [{'AA764':true}, {'AA324': true}, {'AA234': false}, {'AA553': true}, {'AA7365': false}]; 
 

 
// Result 
 
var accountsResult = []; 
 

 
// Loop through the array items 
 
for (var i = 0; i < accounts.length; i++) { 
 
    // Loop through the object properties 
 
    Object.keys(accounts[i]).forEach(function (key) { 
 
    // Check if the value is true 
 
    if (accounts[i][key]) { 
 
     // If it is true add to the resulting array 
 
     accountsResult.push(Object.keys(accounts[i])[0]); 
 
    } 
 
    }); 
 
} 
 

 
// Voilà, you have your result in a new array 
 
console.log(accountsResult);

Answer 7

Вы можете сделать это таким образом, как хорошо.

<ul> 
    <li ng-repeat="account in accounts"> 
    <input type="checkbox" ng-model="account.selected" value={{account.name}} /> 
    </li> 
</ul> 

function abc(){ 
$scope.accountsArray = []; 
     angular.forEach($scope.accounts, function(account){ 
     if (!!account.selected) $scope.albumNameArray.push(account.name); 
     }) 
}