filtering $http json data with angular

Question

I have read through numerous questions here already, but something just isnt clicking with me and understanding this issue i have.

the js code:

    app.controller('example_ctrl',['$scope','$http', function($scope, 
    $http){
    $http.get('api_call_here').then(function successCallBack(response){
    $scope.response = response;
    });

Json format of api:

    {
      "categoryOne": {
        "1": {
          "title": "someData1",
          "description": "This is number One"
        },
        "2": {
          "title": "moreData1",
          "description": "I am not a number, I'm a free man!"
        }
      }
    }

Now because this hasnt been returned in an array, I get an error whenever I try to filter it. As an example:

    <div ng-repeat="(category, object) in response.data">
       <div ng-repeat="item in object">
         <p>{{item.title}}</p>
       </div>
    </div>

Now if i try to put an ng-model on a search input, and tie that to the ng-repeat with a |filter:ng-model name, I get an error.

What I basically WANT to do, is when you type text into the search field, have it return only the title/descriptions that contain that text.

Answer 1

You can transform the list of object in each category to array:

 app.controller('example_ctrl',['$scope','$http', function($scope, $http){ $http.get('api_call_here').then(function(response) { Object.keys(response.data).forEach(function(category) { response.data[category] = Object.values(response.data[category]); // Transfom list of objects in each category to array }); console.log("transformed: ", response); $scope.response = response; });