使用 AngularJS 显示来自 JSON 的具有引用 id 的数据

Question

我正在使用 AngularJS 显示来自 JSON 的带有参考 ID 的数据。但是 JSON 结构略有改变，所以参考 id 没有正确。

以前的 JSON：

{
  "tid": "2440",
  "name": "Alfredo's Pizzeria",
  "field_location_category": [
      "Food and Dining"
  ]
},
{
  "tid": "2441",
  "name": "Allegro Dining Room",
  "field_location_category": [
      "Food and Dining"
  ]
},
{
  "tid": "2443",
  "name": "Art Gallery",
  "field_location_category": [
      "Gifts & Memories"
  ]
},
{
  "tid": "2435",
  "name": "Bellini's",
  "field_location_category": [
      "Entertainment/Bars"
  ]
},
{
  "tid": "2498",
  "name": "Bullseye",
  "field_location_category": [
      "Pools, Sports & Spa"
  ]
}

当前 JSON：

{
  "count": 70,
  "language": "en",
  "0": {
    "id": "2420",
    "title": "Medical Center",
    "description": "The medical staff on-board are available for consultation; hours are posted in the Princess Patter.  Please contact the Medical Center should you suffer from motion sickness and require a remedy.  Professional services as well as medications are provided at reasonable costs.  For medical emergencies, please dial 911.  Your stateroom stateroom steward can provide you with the necessary safe waste receptacle if you have a medical condition that requires the use of sharps or needles.",
    "time": "8:00am-10:00am & 4:30pm-6:30pm",
    "manager": null,
    "cover_charge": "",
  },
  "1": {
    "id": "7840",
    "title": "Conference Room - Deck 5 Portside",
    "description": "Located on Deck 5 on both portside and starboard sides, the conference rooms onboard Regal Princess can be reserved for group meetings.  Please enquire for details at the Passenger Services Desk.",
    "time": null,
    "manager": null,
    "cover_charge": null,   
  },
  "2": {
    "id": "2426",
    "title": "Conference Room - Deck 5 Starboard",
    "description": "Located on Deck 5 on both portside and starboard sides, the conference rooms onboard Regal Princess can be reserved for group meetings.  Please enquire for details at the Passenger Services Desk.",
    "time": null,
    "manager": null,
    "cover_charge": "",  
  }
}

控制器是

var detailResult = $filter('filter')($scope.locationDetail, {id:path})[0];

这里 $scope.locationDetail 是我的 JSON 数据，path 是从 URL 获取的对应 ID。

我检查了$scope.locationDetail 和path，两者都正确。我认为问题出在最后一节{id:path})[0];。 id 引用不正确。

Answer 1

Angular 过滤器不能使用对象字面量。在您当前的 JSON 中，您将其用作“0”、“1”、“2”等。

使您的代码正常工作。像下面这样分离数组的内部内容

代码

var isArrayProccessingDone = false; 
$scope.newLocationDetail = [];
for(var i=0; !isArrayProccessingDone ; i++){
    newLocationDetail.push($scope.locationDetail['"'+i+'"']);
}

现在使用新创建的范围变量进行过滤。

var detailResult = $filter('filter')($scope.newLocationDetail, {id: path})[0];

(详情请参考SO Question)

我不知道你为什么改变了人们通常遵循的旧 JSON 结构。

更新

我想建议你改变你的 JSON 结构如下。

JSON

$scope.locationDetail = {
        "count": 70,
            "language": "en",
            "subDetail": [{
            "id": "2420",
                "title": "Medical Center",
                "description": "The medical staff on-board are available for consultation; hours are posted in the Princess Patter.  Please contact the Medical Center should you suffer from motion sickness and require a remedy.  Professional services as well as medications are provided at reasonable costs.  For medical emergencies, please dial 911.  Your stateroom stateroom steward can provide you with the necessary safe waste receptacle if you have a medical condition that requires the use of sharps or needles.",
                "time": "8:00am-10:00am & 4:30pm-6:30pm",
                "manager": null,
                "cover_charge": ""
        }, {
            "id": "7840",
                "title": "Conference Room - Deck 5 Portside",
                "description": "Located on Deck 5 on both portside and starboard sides, the conference rooms onboard Regal Princess can be reserved for group meetings.  Please enquire for details at the Passenger Services Desk.",
                "time": null,
                "manager": null,
                "cover_charge": null
        }, {
            "id": "2426",
                "title": "Conference Room - Deck 5 Starboard",
                "description": "Located on Deck 5 on both portside and starboard sides, the conference rooms onboard Regal Princess can be reserved for group meetings.  Please enquire for details at the Passenger Services Desk.",
                "time": null,
                "manager": null,
                "cover_charge": ""
        }]
    }

然后您的过滤器将如下所示。

var detailResult = $filter('filter')($scope.locationDetail.subDetail, {id:'7840'})[0];

Working Fiddle

希望这可以帮助你。谢谢。