javascript - 从 promise 对象或数组中提取数据

Question

I have an API that returns json. The json has 100 objects, each having image url and description of the image. I use ng-repeat to show the images and modal attached that pops-up when I click the images with its description.

我有 2 个模板和 2 个 Controller 用于普通组件和模态组件。我的 HTML 上已经有图像，我只需要将从工厂返回的相同数据传递到 ModalInstanceController，这样我就可以在点击图像时显示描述。

Do I need to call the factory method to get the data inside the ModalInstanceController or pass the data from controller (which is an array that contains promise with resolve). The issue is I passed the ietms with resolve but can't extract it inside ModalInstanceController as it's an array containing promise (in console it says 'value was evaluated just now' and I can't use .then() to an array.

我的代码结构是:

JSON 工厂

(function() {
  angular
    .module('Brastlewark')
    .factory('GnomeFactory', GnomeFactory)

  function GnomeFactory($http) {
    let allGnomes = { getAllGnomes }

    function getAllGnomes() {
      const url = 'https://raw.githubusercontent.com/rrafols/mobile_test/master/data.json'
      return $http.get(url)
        .then(response => response.data.Brastlewark)
    }
    return allGnomes
  }
})()

打开模态实例的主 Controller

(function() {
  angular
    .module('Brastlewark')
    .controller('DetailsController', DetailsController)

  function DetailsController(GnomeFactory, $log, $uibModal) {
    let vm = this

    GnomeFactory.getAllGnomes()
      .then((data) => {
        vm.gnomeList = data
        return vm.gnomeList
      })

    // opening modal window to trigger model instance controller to act
    vm.showModal = (index) => {
      $log.log(`Button with index ${index} was clicked !!`)
      let configModal = {
        animation: true,
        templateUrl: 'myModal.html',
        size: 'sm',
        controller: 'ModalController',
        resolve: {
          gnomeData: () => vm.gnomeList
        }
      }
      let modalInstance = $uibModal.open(configModal)
      modalInstance.result.then(console.log, console.log)
    }
  }
})()

模态 Controller

angular
  .module('Brastlewark')
  .controller('ModalController', ModalController)

function ModalController($scope, $uibModalInstance, $log, gnomeData) {

  $scope.gnomeList = gnomeData
  $scope.ok = function() {
    $uibModalInstance.close($scope)
  }
  $scope.cancel = () => {
    $uibModalInstance.dismiss('cancel')
  }
}

两者的模板

    <section id="details">
      <ul>
        <li ng-repeat="gnome in vm.gnomeList">
          <button type="button" ng-click="vm.showModal($index)">
            <img ng-src={{gnome.thumbnail}}>
          </button>
        </li>
      </ul>
    </section>

    <!-- @modal template start -->
    <script type="text/ng-template" id="myModal.html">
      <div class="modal-body" id="modalbody">
        <ul>
          <p>Friends : </p>
          <li ng-repeat="friend in gnomeList.friends">
            <span>{{friend}}</span>
          </li>
        </ul>
        <div class="modal-footer">
          <button class="btn btn-primary" type="button" ng-click="ok()">OK</button>
          <button class="btn btn-warning" type="button" ng-click="cancel()">Cancel</button>
        </div>
    </script>

注意:它显示了模式和点击图像的索引......但没有收到数组。

Answer 1

将您的服务更改为(仅返回 API promise )

(function() {
  angular
    .module('Brastlewark')
    .factory('GnomeFactory', GnomeFactory)

  function GnomeFactory($http) {
    let allGnomes = { getAllGnomes }

    function getAllGnomes() {
      const url = 'https://raw.githubusercontent.com/rrafols/mobile_test/master/data.json'
      return $http.get(url)
    }
    return allGnomes
  }
})()

仅返回一个 API promise return $http.get(url)

现在是您的 Controller ，使用 then 处理从服务返回的 promise

(function() {
  angular
    .module('Brastlewark')
    .controller('DetailsController', DetailsController)

  function DetailsController(GnomeFactory, $log, $uibModal) {
    let vm = this

    GnomeFactory.getAllGnomes()
      .then((data) => {
        vm.gnomeList = data.data.Brastlewark
        return vm.gnomeList
      },(data) => {
       console.log('error')
      })

    // opening modal window to trigger model instance controller to act
    vm.showModal = (index) => {
      $log.log(`Button with index ${index} was clicked !!`)
      let configModal = {
        animation: true,
        templateUrl: 'myModal.html',
        size: 'sm',
        controller: 'ModalController',
        resolve: {
          gnomeData: () => vm.gnomeList
        }
      }
      let modalInstance = $uibModal.open(configModal)
      modalInstance.result.then(console.log, console.log)
    }
  }
})()