消失/重新出现的 JSON 数据答案

【问题标题】：Disappearing/re-appearing JSON data消失/重新出现的 JSON 数据
【发布时间】：2015-12-16 18:00:32
【问题描述】：

我正在使用 Angular，并且有一个 JSON 响应，其中一个属性值正在消失（为空），但如果您直接查看它，它会出现（并且具有正确的值）。应该有数据的属性是vehicles 属性。

JSON 数据

{
    "data": {
        "blocks": [
            {
                "vehicles": [
                    {
                        "agency": "ZGM Bike Share",
                        "mode": "bikeshare",
                        "name": "Research Chemistry Lab",
                        "space_count": 4
                    },
                    {
                        "agency": "ZGM Bike Share",
                        "mode": "bikeshare",
                        "name": "ENG North",
                        "space_count": 4
                    },
                    {
                        "agency": "ZGM Bike Share",
                        "mode": "bikeshare",
                        "name": "Research South",
                        "space_count": 6
                    }
                ]
            }
        ],
        "screen": {}
    }
}

控制台

以下是来自此的 2 个console.log()。一种是完整响应，另一种是直接访问vehicles 属性。如您所见，在完整的响应中，它是空的，但直接访问时它包含数据。

问题

我们正在使用 Angular 并且经过一些 JS 操作，这发生在上面的 console.log() 之后，我们将此对象传递给模板。因为它是作为一个完整对象传递的，所以它以 vehicles 为空传递它。

代码 sn-p

这是进行调用和处理响应的部分。

tsApp.service('updateService', function($http, $q, jsonResponse, $timeout, $interval, $log, $location) {

  // Cut out a bunch of code that happens after getUpdate()

  function getUpdate() {
    var request = $http({
      method: 'get',
      dataType: 'json',
      url: '/data/' + id + '.json',
      timeout: updateRequestTimeout
    });

    return (request.then(handleSuccess, handleError));
  }

  function handleSuccess(response) {
      console.log(response.data);
      console.log(response.data.data.blocks[0].vehicles);
      return response.data;
  }

  return updateService;

});

【问题讨论】：

标签： javascript angularjs json

【解决方案1】：

所以我从你的问题中理解了以下内容：

您从远程服务器请求了资源，得到了它，但是当从控制器等调用角度服务时，它什么也不返回。

问题是，您自己发起了请求，并且您将 handleSuccess 函数的值返回给服务本身，而不是返回给它的调用者。

这是固定代码：

tsApp.service('updateService', function($http, $q, jsonResponse, $timeout, $interval, $log, $location) {

  var serviceObj = { vehicles: [] };
  // Cut out a bunch of code that happens after getUpdate()

  function getUpdate() {
    var request = $http({
      method: 'get',
      dataType: 'json',
      url: '/data/' + id + '.json',
      timeout: updateRequestTimeout
    });

    request.then(handleSuccess, handleError);
  }

  function handleSuccess(response) {
      console.log(response.data);
      console.log(response.data.data.blocks[0].vehicles);
      serviceObj.vehicles = response.data.data.blocks[0].vehicles;
  }

  return serviceObj;

});

现在，当您需要车辆对象时，您将调用：

updateService.vehicles

请注意，在检索到响应之前它将为空。为了确保在使用之前获得它，您还可以在 rootScope 上添加广播事件。这样，想要使用它的控制器/指令将能够确定它是否已经发送：

// Broadcast the handleSuccess event
serviceObj.ready = true;
$rootScope.$boradcast("updateService.vehicles.success", true);

// Listen to this event from other controller / directive to make sure the request finished up
if(updateService.ready === true) {
    successFunc()
}
$rootScope.$on("updateService.vehicles.success", successFunc);

【讨论】：