Создать выпадающий список с данными JSON

0

Я хотел бы получить поля имени и описания из приведенных ниже 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>
  • 0
    Хороший вопрос. Вот что работает для нашей системы аутентификации.
Теги:

1 ответ

1
Лучший ответ

Предположим, что вы правильно получаете 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>
Поделиться
  • 0
    Это потрясающе и похоже, что это будет работать, но мне интересно, как я смогу редактировать данные json, которые находятся на сервере heroku. Я использовал эти две записи только для примера.
  • 0
    Хм .. в чем проблема?
Показать ещё 4 комментария

Ещё вопросы

Сообщество Overcoder
Наверх
Меню