javascript - 消失/重新出现的 JSON 数据

Question

我正在使用 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直接属性(property)。正如您所看到的，在完整的响应中，它是空的，但是当直接访问时，它包含数据。

问题

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

代码片段

这是发出调用并处理响应的部分。

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;

});

Answer 1

所以我从你的问题中了解到以下内容:

您从远程服务器请求了资源并获得了它，但是当从 Controller 等调用它时， Angular 服务什么也不返回。

问题是，您本身发起了请求，并将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 上添加广播事件。这样，想要使用它的 Controller /指令将能够确定它是否已经发送:

// 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);