使用json數據創建下拉列表

我想從下面的json數據中檢索名稱和描述字段，然後將其附加到頁面上。目前我可以確定只能看到信息。這是我嘗試過的，它不起作用。我相信這是遠遠不夠正確的，但我想要朝正確的方向推進。使用json數據創建下拉列表

mainApp.controller('drpdwnCtrl',['$scope','$http' , function ($scope, $http) { 
 
    // $scope.ChoreList = null; 
 
    //Declaring the function to load data from database 
 
    $scope.fillChoreList = function() { 
 
     $http({ 
 
      method: 'GET', 
 
      url: 'https://tiy-homeshare.herokuapp.com/homes/26/completed_chores', // Travis' 
 
      // data: $scope.ChoreList, 
 
      headers: {Authorization: JSON.parse(localStorage.getItem("user_token")) } 
 
     }).success(function (result) { 
 
      $scope.completeChoreList = result.chores.completed; 
 
      console.log($scope.completeChoreList); 
 
     }); 
 
    }; 
 
    // Calling the function to load the data on pageload 
 
    $scope.fillChoreList(); 
 
}]); // end drpdwnCtrl

{ 
 
    "chores": { 
 
    "completed": [ 
 
     { 
 
     "id": 61, 
 
     "chore_creator_id": 97, 
 
     "home_id": 26, 
 
     "name": "empty", 
 
     "description": "trash", 
 
     "bill_value": null, 
 
     "votes": null, 
 
     "thumbs_up": null, 
 
     "created_at": "2016-07-31T20:43:06.013Z", 
 
     "completed_at": "2016-07-31T20:46:31.604Z", 
 
     "chore_completer_id": 97, 
 
     "chore_assignee_id": null, 
 
     "avatar": null, 
 
     "chore_xp": 40, 
 
     "completed": true 
 
     },

<div ng-controller="drpdwnCtrl"> 
 
     <select ng-options="chores in completeChoreList" ng-model="selectedChores" > 
 
      <option value="" label="Select a chore"></option> 
 
     </select> 
 
    </div>

來源

2016-08-01 trav

好問題。這對我們的認證系統很有用。 – trav

假設你是獲取正確JSON在$http的要求，你就必須糾正你的ngOptions建設。它應該是這樣的：

<select ng-options="chores.name + ' ' + chores.description for chores in completeChoreList" ng-model="selectedChores"> 
    <option value="" label="Select a chore"></option> 
</select>

完全code：

(function() { 
 
    angular 
 
    .module('app', []) 
 
    .controller('drpdwnCtrl', drpdwnCtrl); 
 

 
    drpdwnCtrl.$inject = ['$scope']; 
 

 
    function drpdwnCtrl($scope) { 
 
    var data = { 
 
     "chores":{ 
 
      "completed":[ 
 
      { 
 
       "id":61, 
 
       "chore_creator_id":97, 
 
       "home_id":26, 
 
       "name":"empty", 
 
       "description":"trash", 
 
       "bill_value":null, 
 
       "votes":null, 
 
       "thumbs_up":null, 
 
       "created_at":"2016-07-31T20:43:06.013Z", 
 
       "completed_at":"2016-07-31T20:46:31.604Z", 
 
       "chore_completer_id":97, 
 
       "chore_assignee_id":null, 
 
       "avatar":null, 
 
       "chore_xp":40, 
 
       "completed":true 
 
      }, 
 
      { 
 
       "id":60, 
 
       "chore_creator_id":97, 
 
       "home_id":26, 
 
       "name":"clean", 
 
       "description":"bathroom", 
 
       "bill_value":null, 
 
       "votes":null, 
 
       "thumbs_up":null, 
 
       "created_at":"2016-07-31T20:42:59.097Z", 
 
       "completed_at":"2016-07-31T20:46:33.943Z", 
 
       "chore_completer_id":97, 
 
       "chore_assignee_id":null, 
 
       "avatar":null, 
 
       "chore_xp":90, 
 
       "completed":true 
 
      }, 
 
      { 
 
       "id":59, 
 
       "chore_creator_id":97, 
 
       "home_id":26, 
 
       "name":"sweep", 
 
       "description":"house", 
 
       "bill_value":null, 
 
       "votes":null, 
 
       "thumbs_up":null, 
 
       "created_at":"2016-07-31T20:42:50.982Z", 
 
       "completed_at":"2016-07-31T20:48:54.927Z", 
 
       "chore_completer_id":97, 
 
       "chore_assignee_id":null, 
 
       "avatar":null, 
 
       "chore_xp":50, 
 
       "completed":true 
 
      } 
 
      ] 
 
     } 
 
    }; 
 

 
    $scope.completeChoreList = data.chores.completed; 
 
    } 
 
})();

<!DOCTYPE html> 
 
<html ng-app="app"> 
 

 
<head> 
 
    <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.8/angular.min.js"></script> 
 
</head> 
 

 
<body> 
 
    <div ng-controller="drpdwnCtrl"> 
 
    <select ng-options="chores.name + ' ' + chores.description for chores in completeChoreList" ng-model="selectedChores"> 
 
     <option value="" label="Select a chore"></option> 
 
    </select> 
 
    </div> 
 
</body> 
 

 
</html>

來源

2016-08-01 01:31:56 developer033

這真棒，看起來像它會工作，但我想知道我將如何編輯駐留在heroku服務器上的json數據。例如，我只使用這兩個條目。 – trav

嗯..有什麼問題？ – developer033

抱歉不清楚。只是好奇，如果我能指出「var data =」GET GET請求？ – trav

使用json數據創建下拉列表

回答

相關問題