Create dropdown list with json data

Question

I would like to retrieve the name and description fields from the below json data and then append it to the page. At the moment I'd be ok to just be able to see the info. This is what I've tried and it's not working. I'm sure it's nowhere near correct but I'd like a push in the right direction.

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>

Good question. That's what works for our authentication system. — trav
– trav, Commented Aug 1, 2016 at 2:01

developer033 · Accepted Answer · 2016-08-01 01:43:29Z

Supposing that you're retrieving that JSON correctly in your $http request, you just have to correct your construction of ngOptions. It should be like this:

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

Full 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>

That's awesome and looks like it will work but I'm wondering how I would be able edit json data that resides on the heroku server. I was using these two entries only for example.
Sorry for not being clear. Just curious if I could point "var data=" to a GET $http request?
You're right. I couldn't see my drop down menu because I was in mobile spoofing view and it was incredibly tiny. It is totally working. Thanks again @developer33 !!!! Not the first time you've helped me out.

Collectives™ on Stack Overflow

Create dropdown list with json data

1 Answer 1

5 Comments

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

5 Comments

Related