Получить информацию из массива объектов на AngularJS

У меня есть сущность Страна (поля: id, name, valuta) и сущность Город (поля: id, name, country_id) Т.е. в одной стране много городов (отношение один ко многим).

Когда делаю запрос на бэкенд для получения всех городов, то приходит массив типа:

[
    {
        "id": 1,
        "name": Moscow
    },
    ...
]

Запрос на все страны:

[
    {
        "id": 1,
        "name": Russia,
        "valuta": "RUB",
        "cities": [
            {
                "id": 1,
                "name": Moscow
            },
            ...
        ]
    },
    ...
]

То есть в массиве городов я не вижу к какой стране относится город. А я эту инфу хочу на страничку вывести в таблицу городов:

<div>
        <h3>Список городов</h3>
        <table class="table table-hover" cellpadding="0" cellspacing="0">
            <thead>
            <tr>
                <td>ID города</td>
                <td>Название</td>
                <td>Страна</td>
            </tr>
            </thead>
            <tbody>
            <tr ng-repeat="city in Cities">
                <td>{{city.id}}</td>
                <td>{{city.name}}</td>
                <td>?????????_КАК_????????????</td>
            </tr>
            </tbody>
        </table>
    </div>

Сейчас скрипт-js такой:

angular.module('app', []).controller('indexController', function ($scope, $http) {

    const contextPath = 'http://localhost:8082';
    console.log(contextPath);
    
    $scope.getCountries = function () {
        const url = contextPath + '/country';
        $http.get(url)
                .then(function (resp) {
                    $scope.Countries = resp.data;
                });
    };

    $scope.getCities = function () {
        const url = contextPath + '/cities';
        $http.get(url)
                .then(function (resp) {
                    $scope.Cities = resp.data;
                });
    };

    $scope.fillPage = function () {
        $scope.getCountries();
        $scope.getCities();
    };

    $scope.fillPage();
    
});

Подскажите, как можно получить? Я это пытаюсь как-то в js-скрипте сделать. Какой-то хитрый метода наверное нужен.


Ответы (1 шт):

Автор решения: nörbörnën
<div>
  <h3>Список городов</h3>
  <table class="table table-hover" cellpadding="0" cellspacing="0">
    <thead>
      <tr>
        <td>ID города</td>
        <td>Название</td>
        <td>Страна</td>
      </tr>
    </thead>
    <tbody ng-repeat="country in Countries">
      <tr ng-repeat="city in country.cities">
        <td>{{ city.id }}</td>
        <td>{{ city.name }}</td>
        <td>{{ country.name }}</td>
      </tr>
    </tbody>
  </table>
</div>
→ Ссылка