javascript - 如何访问另一个数组中的对象数组中的 ID 或名称？

Question

我正在尝试遍历以从数组中的对象获取所有id 和name，而数组又在另一个数组中。即使我尝试使用以下方法从 1 个特定对象中获取，它也会给我“未定义”:

companies[0][0]['id']

这是我的数组:

Controller :

app.controller('HomeController', ['$scope', 'companies', function($scope, companies) {

    $scope.companies = companies;
        console.log('companies', $scope.companies);

}]);

而且我什至不确定如何使用表达式在 HTML 中显示/访问它:

<div class="container" ng-controller="HomeController">
    <div ng-repeat="company in companies" class="list">
        <a href="#/{{ company.id }}" class="company-name">
        {{ company.name }}
    </div>
</div>

已更新

工厂:

app.factory('companies', ['$http', function($http) {
    data = [];
    for (let i = 1; i < 11; i++) {
        $http.get('https://examplepage.com/wp-json/wp/v2/categories?per_page=50&page=' + i)
        .then(function(response) {
            data.push(response.data);
            console.log('data', data);
        },
        function(err) {
            return err;
        });
    }
    return data;
}]);

Answer 1

编辑(根据问题更新)

问题

Controller 与工厂之间交互的设计方式脆弱且容易出错。请参阅下面注释的代码:

// factory
app.factory('companies', ['$http', function($http) {
    data = [];
    for (let i = 1; i < 11; i++) {
        // you CANNOT control when this is going to return
        $http.get('https://examplepage.com/wp-json/wp/v2/categories?per_page=50&page=' + i)
        .then(function(response) {
            // so this doesn't push to `data` synchronously, this DOES NOT
            // guarantee you when you return data, every response.data will be there
            data.push(response.data);
            console.log('data', data);
        },
        function(err) {
            return err;
        });
    }
    // this will always be returned empty ([], as you initialized it) because
    // the async responses (commented above) haven't arrived when this lint his hit.
    return data;
}]);

// controller
$scope.companies = companies; // so, companies will always be [] (empty array)

解决方案

您应该强烈考虑将您实现工厂的方式更改为如下所示:

想法:

• 不要为获取 550 个项目调用端点 x (11) 次(50 * 11 次)
• 在工厂中提供一个函数(getCompanies)，它接受一个itemsPerPage 和一个page 参数，这样你可以获得尽可能多的项目如您所愿，在您想要的页面中。即:要获得 550 件商品，您应该调用它:companies.getCompanies(550);
• 从任何想要获取公司调用的 Controller companies.getCompanies

代码:

// factory
app.factory('companies', ['$http', function($http) {

    function fnGetCompanies(itemsPerPage, page) {
        var ipp = itemsPerPage || 50; // 50 default
        var page = page || 0; // 0 default page
        // return the promise instead of data directly since you cannot return the value directly from an asynchronous call
        return $http
            .get('https://examplepage.com/wp-json/wp/v2/categories?per_page=' + ipp + '&page=' + page)
            .then(
                function(response) {
                    // and then return the data once the promise is resolved
                    return response.data;
                },
                function(err) {
                    return err;
                }
            );
    }
    // provide a `getCompanies` function from this factory
    return {
        getCompanies: fnGetCompanies
    }
}]);

// controller
// get 550 items starting from 0
companies.getCompanies(550, 0).then(function(companies) {
    $scope.companies = companies;
});

附加说明

记住You cannot return from an asynchronous call inside a synchronous method

---

原帖

你可以使用 Array.prototype.reduce首先为了将多数组结构转换为单个数组，如下所示:

$scope.companies = companies.reduce(function(prevArr, currentArr) { return prevArr.concat(currentArr);}, []);

这会转换这样的结构:

[
 [{id: 1, name: 'A'}, {id: 2, name: 'B'}, {id: 3, name: 'C'}],
 [{id: 4, name: 'D'}, {id: 5, name: 'E'}, {id: 6, name: 'F'}]
];

进入这个:

[{"id": 1,"name": "A"},{"id": 2,"name": "B"},{ "id": 3,"name": "C"},{"id": 4,"name": "D"},{"id": 5,"name": "E"},{"id": 6,"name": "F"}]

简单演示:

var companies =[
 [{id: 1, name: 'A'}, {id: 2, name: 'B'}, {id: 3, name: 'C'}],
 [{id: 4, name: 'D'}, {id: 5, name: 'E'}, {id: 6, name: 'F'}]
];

console.log(companies.reduce(function(prev, current) { return prev.concat(current);}, []));