Angularjs - 閱讀裏面的json文件

這是我第一次嘗試angularjs和離子框架。Angularjs - 閱讀裏面的json文件

我有一個示例json文件，我想從屏幕上顯示一些數據。顯示數據位的作品，但我想填充一個「詳細信息」頁面的一些信息存儲爲主json文件內的一個abject，並且我需要使用來自url的id選擇僅顯示我需要的數據。

下面是一些代碼：

App.js

angular.module('hgapp', ['ionic', 'hgapp.controllers', 'ngResource']) 

.config(function ($stateProvider, $urlRouterProvider) { 
    $stateProvider 
     .state('app', { 
      url: '/app', 
      abstract: true, 
      templateUrl: 'templates/menu.html', 
      controller: 'AppCtrl' 
     }) 
     .state('app.details', { 
      url: '/details/:roomID', 
      views: { 
       'menuContent': { 
        templateUrl: 'templates/details.html', 
        controller: 'DetailsCtrl' 
       } 
      } 
     }) 
    $urlRouterProvider.otherwise('/app/home'); 
});

Controllers.js

angular.module('hgapp.controllers', ['hgapp.services']) 

.controller('AppCtrl', function ($scope, HGJson) { 
    HGJson.get(function (data) { 
     $scope.rooms = data.data; 
    }) 
}) 

.controller('DetailsCtrl', function ($scope, $stateParams, HGJson) { 
    $scope.roomID = $stateParams.roomID; 
    console.log($stateParams.roomID); 
})

services.js

angular.module('hgapp.services', ['ngResource']) 
.factory('HGJson', function ($resource) { 
    return $resource('json/data.json') 
});

Data.json（只是一個簡單的例子）

{ 
    tm: 00000000, 
    errors: 0, 
    data: { 
     {id: 0, name: Value 0, url:url-0}, 
     {id: 1, name: Value 1, url:url-1}, 
     {id: 2, name: Value 2, url:url-2} 
}

details.html

<ion-view view-title="Details"> 
<ion-content> 
    <h1>{{roomID}}</h1> 
</ion-content>

在詳細信息頁面即時打印roomID剛看看控制器（detailsCtrl）是否工作，並且我每次都打印正確的ID。現在，我陷入困境的是如何操作HGJson服務中的數據，以便它可以打印來自正確房間ID的數據。

我希望這個問題已經夠清楚了，如果不是的話，請隨時索要更多的說明。

非常感謝

編輯

最後我解決它增加這個我controller.js文件：

.controller('DetailsCtrl', function ($scope, $stateParams, HGJson) { 
    HGJson.get(function (data) { 
     angular.forEach(data.data, function (item) { 
      if (item.id == $stateParams.roomID) 
       $scope.currentRoom = item; 
     }); 
    }); 
})

來源

2015-12-21 Nick

你嘗試過'json'過濾器嗎？在你的html中：'{{roomID | json}}' –

添加json過濾器的結果是this - >「6」（對於roomID = 6）。沒有別的，它只是增加了speexmarks – Nick

如果你嘗試'{房間| JSON}}'。你看到data.json的數據嗎？ –

只是做同樣的事情，你在做什麼在應用程序控制器中執行操作，但在返回的JSON中找到您想要的空間：

HGJson.get(function (data) { 
    $scope.room = data.data.filter(function(room) { 
     return room.id == $stateParams.roomID); 
    })[0]; 
});

您也可以將該過濾功能放入您的服務中，以便將來當您擁有真正的動態後端時，您可以調用不同的網址返回所需的房間，而不是調用返回所有房間的網址。

angular.module('hgapp.services') 
.factory('HGJson', function ($http) { 
    return { 
     getRooms: function() { 
     return $http.get('json/data.json').then(function(response) { 
      return response.data; 
     }); 
     }, 
     getRoom: function(roomId) { 
     return $http.get('json/data.json').then(function(response) { 
      return response.data.data.filter(function(room) { 
      return room.id == roomID; 
      })[0]; 
     }); 
     } 
    }; 
});

請注意，您的JSON無效：數據必須是數組，而不是對象。

來源

2015-12-21 11:16:06

1）感謝關於json的建議，它實際上只是在問題上是錯誤的，而不是在我的開發機器上 2）您能提供一個在服務上添加過濾的例子嗎？或者我可以閱讀更多關於它的內容？謝謝 – Nick

我不能使用你的代碼，它會在控制檯中產生大量的錯誤，並且我無法再回收任何數據 – Nick

getRoom（roomId） – Nick

在您的控制器中，您將需要創建一個函數以在數據對象中「查找」正確的對象。

嘗試是這樣的：

$scope.getRoom = function(id) { 
    for(var i in $scope.rooms) { 
    if($scope.rooms[i].id === id) { 
     return $scope.rooms[i]; 
    } 
    } 
};

而且你可以在你的DOM它顯示：

{{ getRoom(roomID) }}

但它很可能是更好的設置當前房間到範圍變量而不是每次運行該功能。因此，在這種情況下（我強烈建議），而不是返回$scope.rooms[i]，你可以設置angular.copy($scope.rooms[i], $scope.currentRoom)（這將複製房間到currentRoom範圍變量），然後在DOM與單純{{ currentRoom }}

好運氣使用它！

來源

2015-12-21 11:20:20

我假設getRoom函數需要進入detailsCtrl裏面，對嗎？ – Nick

是的，這是正確的。 –

但是，就像在我的建議中，我會在數據加載時找到房間，並將其設置爲「currentRoom」，因此您並不總是計算getRooms –

Angularjs - 閱讀裏面的json文件

回答

相關問題