CODEWITHSUNDEEP
javascriptjsonangularjs
Mrk Fldig
Mrk Fldig

Reputation: 4486

AngularJS Multidimensional JSON

I know this is a bit basic but i'm struggling to get my head round it, I have a web service that returns the follow JSON:

[{"search_id":"1","user_id":"1","all_words":"php","not_words":"C++","one_words":"java","created_at":null,"updated_at":null,"search_name":null},{"search_id":"2","user_id":"1","all_words":"second","not_words":"not","one_words":"one","created_at":null,"updated_at":null,"search_name":null}]

So when it gets to angular I end up with the following:

Array[2]
  0: Object
  $$hashKey: "object:5"
  all_words: "php"
  created_at: null
  not_words: "C++"
  one_words: "java"
  search_id: "1"
  search_name: null
  updated_at: null
  user_id: "1"
  __proto__: 

1: Object
  $$hashKey: "object:6"
  all_words: "second"
  created_at: null
  not_words: "not"
  one_words: "one"
  search_id: "2"
  search_name: null
  updated_at: null
  user_id: "1"
  __proto__:

Which is a real pain to work with in ng-repeat, how would I go about being able to access it like so(rough example)

ng-repeat="item in items"
 {{ item.search_id }}

to be clear the only way I can get data from it is by doing:

<tr ng-repeat="items in data">
    <td ng-repeat="(key, value) in items"> </td>
</tr>

Controller code is here:

testAPI.getSearches().then(function (data) {
        $scope.data=  testAPI.searchList();
        console.log($scope.data);
    }, function (error) {
        alert("Error in getSearches");
    });

getsearches as follows, searchList returns the searches variable:

getSearches: function() {
    var deferred = $q.defer();
    $http({
        url: 'http://localhost/api/api/tray/search/list'
    }).success(function (data) {
        searches = data;
        console.log(data);
        deferred.resolve(data);
    }).error(function (data) {
        alert('Error');
        deferred.reject(data);
    });
    return deferred.promise;
},

Hrm thanks for the responses guys but the plain "item in data" does not work in my case I have to use (key,value) in items inside a nested ng repeat, any ideas what i'm missing?

By the way not sure if this matters put the HTML is inside a partial and i'm using ui router for the navigation?

UPDATE Thank you all very much for your help, looks like this problem was caused by a typo on a containing HTML element and the controller not being setup properly because I messed up the ui router setup. Once i've had a chance to make sure i've missed nothing else i'll post back.

Upvotes: 0

Views: 1682

Answers (3)

KenavR
KenavR

Reputation: 3899

Maybe I am missunderstanding, but this should actually work. Plunker The Example includes the Controller As and $scope approaches.

Controller

angular
    .module("app", [])
    .controller("MainController", ['$scope', function($scope) {
      var vm = this;

      var json = '[{"search_id":"1","user_id":"1","all_words":"php","not_words":"C++","one_words":"java","created_at":null,"updated_at":null,"search_name":null},{"search_id":"2","user_id":"1","all_words":"second","not_words":"not","one_words":"one","created_at":null,"updated_at":null,"search_name":null}]';
      vm.items = JSON.parse(json);
      $scope.items = JSON.parse(json);

    }]);

html

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

  <head>
    <link rel="stylesheet" href="style.css" />
  </head>

  <body ng-controller="MainController as vm">
    <h1>Items Controller As</h1>
    <div ng-repeat="item in vm.items">
      {{ item.search_id }}
    </div>

    <h1>Items $scope</h1>
    <div ng-repeat="item in items">
      {{ item.search_id }}
    </div>

    <script data-require="[email protected]" data-semver="1.3.6" src="https://code.angularjs.org/1.3.6/angular.js"></script>
    <script src="script.js"></script>
  </body>

</html>

Edit: Added my comment from above. Why do you use two nested ng-repeats? I guess one object of the array should be one row in the table. Therefore 

<tr ng-repeat="item in data">
  ...
  <td>{{item.search_name}}</td>
  ...
</tr>

should work. Unless you need the keys of the object, than you need (key, value).

Upvotes: 1

SoluableNonagon
SoluableNonagon

Reputation: 11755

works fine for me: http://plnkr.co/edit/ubiWcF3CemeKo6dzkvNC?p=preview

var app = angular.module("myApp", []);

app.controller('myCtrl', ['$scope', function($scope){

  $scope.data = JSON.parse('[{"search_id":"1","user_id":"1","all_words":"php","not_words":"C++","one_words":"java","created_at":null,"updated_at":null,"search_name":null},{"search_id":"2","user_id":"1","all_words":"second","not_words":"not","one_words":"one","created_at":null,"updated_at":null,"search_name":null}]')


}]);

Upvotes: 1

Aweary
Aweary

Reputation: 2312

This seems to be working fine. Just make sure you're data is tied to your $scope. http://jsfiddle.net/f4zdfh72/

function MyCtrl($scope) {
    
    $scope.data = [{
        "search_id": "1",
        "user_id": "1",
        "all_words": "php",
        "not_words": "C++",
        "one_words": "java",
        "created_at": null,
        "updated_at": null,
        "search_name": null
    }, {
        "search_id": "2",
        "user_id": "1",
        "all_words": "second",
        "not_words": "not",
        "one_words": "one",
        "created_at": null,
        "updated_at": null,
        "search_name": null
    }]
    
    
    
}
<div ng-controller="MyCtrl">
    
    <div ng-repeat='item in data'>
       THIS IS DATA:  {{item.one_words}}
    </div>
    
</div>

Note: run it in the JSFiddle. Stack snippet is just for code preview

Upvotes: 1

Related Questions