使用AngularJS显示来自JSON的refference 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是对应的ID从得到URL。

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

Answer 1

角度过滤器不会工作对象字面量。在您当前的JSON中，您将它用作“0”，“1”，“2”等。

使代码正常工作。别分开阵列的内部内容如下面

CODE

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

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