How to access deeply nested json

[pablo]

I thought this would be easy ... here is a fragment

[

{

"seasonTeamHigh": [

{"teamScratchGame" : [{"score" : 1210, "name" : "LEWIS CONCRETE"}, {"score" : 1204, "name" : "CLASSIC SPORTS"}, {"score" : 1197, "name" : "Team 17"}]},

        {"teamScratchSeries" : [{"score" : 3276, "name" : "RANCHO NICASIO"}, {"score" : 3248, "name" : "COWBOYS AND ALIENS"}, {"score" : 3239, "name" : "CLASSIC SPORTS"}]},

         ...

<li ng-repeat="item in high.seasonTeamHigh.teamScratchGame">

      {{item.score}}

      

    </li>

[pablo]

I get nothing (no errors) ..my controller has $scope.high = data  and I can see that the data is there.

[pablo]

here is a simple fiddle.  What is wrong with my syntax or model.

I just want to access the "score" data

http://jsfiddle.net/stocksp/ADukg/725/ 

On Wednesday, September 5, 2012 8:23:25 PM UTC-7, pablo wrote:

[Stephen Pitchford]

Hi there,

Here is a fixed fiddle. The problem is that you are treating $scope.test as an object not an array. So in order to iterate the list you need to deal with test[0] not just teat.

http://jsfiddle.net/ADukg/726/

I hope that clears it up?

Cheers,

Steve

[pablo]

Thanks for your help.   I'm still a little confused as to why I need array notation here were as I retrieve a half dozen other array's of JSON object and only use . notation.   I'll play with this in the am.   My real data is another lever deep as my first post here shows and hopefully I'll be able to get at the data.

[Jorge Sousa]

Hi Pablo, 

You need an Array notation because your data is held inside an array and not and Associative array. In your example you are using:

$scope.test = [    // Outer container is an array with a single [object | associative array] inside . 
    { "seasonTeamHigh": [

         {"teamScratchGame" : [
             {"score" : 1210, "name" : "LEWIS CONCRETE"}, 
             {"score" : 1204, "name" : "CLASSIC SPORTS"}, 
             {"score" : 1197, "name" : "Team 17"}
         ]},
         {"teamScratchSeries" : [
             {"score" : 3276, "name" : "RANCHO NICASIO"}, 
             {"score" : 3248, "name" : "COWBOYS AND ALIENS"}, 
             {"score" : 3239, "name" : "CLASSIC SPORTS"}
         ]},

         {"someKey": [  
            {"score": 1234, "name": "someName"},    
             {"score": 999, "name": "anotherName"}
         ]}]
    }]; 

To get to "score" you have to use  "item in test[index].seasonTeamHigh.[teamScratchGame | teamScratchSeries | someKey]" 

To do what you want you either  have to use array notation as Paul suggested or your service should return and associative array instead. 

$scope.test = {    // Outer container is a single [object | associative array] inside . 

    "seasonTeamHigh": [
         {"teamScratchGame" : [
             {"score" : 1210, "name" : "LEWIS CONCRETE"}, 
             {"score" : 1204, "name" : "CLASSIC SPORTS"}, 
             {"score" : 1197, "name" : "Team 17"}
         ]},
         {"teamScratchSeries" : [
             {"score" : 3276, "name" : "RANCHO NICASIO"}, 
             {"score" : 3248, "name" : "COWBOYS AND ALIENS"}, 
             {"score" : 3239, "name" : "CLASSIC SPORTS"}
         ]},

         {"someKey": [  
            {"score": 1234, "name": "someName"},    
             {"score": 999, "name": "anotherName"}
         ]}]
    }; 

To get to "score" you have to use  "item in test.seasonTeamHigh.[teamScratchGame | teamScratchSeries | someKey]" 

I have this fiddle http://jsfiddle.net/jhsousa/Mekhy/ that shows how to fill select with nested data. The nested data structure is similar to yours. 

Have fun

Jorge

--
You received this message because you are subscribed to the Google Groups "AngularJS" group.
To post to this group, send email to ang...@googlegroups.com.
To unsubscribe from this group, send email to angular+u...@googlegroups.com.
Visit this group at http://groups.google.com/group/angular?hl=en.
 
 

--
-------------------------------
Jorge Sousa

[pablo]

Thanks a million.  I need to rethink this.  I'm generating the JSON so it can be re structured as I want.  What still confuses me is your statement:

" Outer container is an array with a single [object | associative array] inside ".  Although the data I posted here contained only one object.  The 'real' data set contains many.

"seasonTeamHigh" is just the first of 4 objects in this data set.

If I understand this, then the only difference is  '[...]'  become '{...}' for the outer container ... and I can use dot notation with names, instead of []'s with indexes ?!

P:)

On Wednesday, September 5, 2012 8:23:25 PM UTC-7, pablo wrote:

[Jorge Sousa]

Pablo, 

Please check: 

http://bonsaiden.github.com/JavaScript-Garden/#object.general or 

http://blog.xkoder.com/2008/07/10/javascript-associative-arrays-demystified/

You have to understand the difference between an Array  and an  [Object | Associative Array], they are not the same. Indexes can be used in both cases for instance. All javacript objects with fields can be access with an map or associative array notation. 

var Obj = {}:

Obj.name = "XX"   => Obj: { name: 'XX' }

Obj['age'] = 10;      => Obj: {name: 'XX', age: 10}. 

But its not guaranteed that Obj[0] will always return the 'name', property. It will depend how the field hashcode is implemented in different javascript engines.  

You just have to decide how do you get your data. And the correct way to access it. I think me and Paul were only try to help you on how to access the "model" from angular machinery. Paul's reply was a "bull's eye" one. Mine was in a different direction. 

You have to decide:

- Am I returning my data as a list of objects of the same structure?  => use an Array

- Am I returning my data as a list of objects of different structure?  => Could use an array but then how to know  what element is at a specific index in a simple way? An associative array, meaning a key/value list set would be better. 

Its your structure....

Have fun,

Jorge

--

You received this message because you are subscribed to the Google Groups "AngularJS" group.
To post to this group, send email to ang...@googlegroups.com.
To unsubscribe from this group, send email to angular+u...@googlegroups.com.
Visit this group at http://groups.google.com/group/angular?hl=en.
 
 

--
-------------------------------
Jorge Sousa

[Paul Stocks]

Thanks for the links,  I obviously have some reading to do.  As I don't understand why:
high[0]  and high['seasonTeamHigh'] are not interchangeable in the Angular binding for my models.

[Jorge Sousa]

Ooooppss ...

The other "nice" guy was not Paul but Stephen, Sorry Stephen!!!!

Pablo 

Quinta-feira, 6 de Setembro de 2012 17:49:47 UTC+1, pablo escreveu:

Thanks for the links,  I obviously have some reading to do.  As I don't understand why:
high[0]  and high['seasonTeamHigh'] are not interchangeable in the Angular binding for my models.

Because with your supplied data, assuming 

var high = [ ...data ....]; 

high[0] is pointing to an (single in that case) Object. That object has a field called 'seasonTeamHigh'!! 

So high[0] => Object

high['seasonTeamHigh']   => undefined 

but 

high[0]['seasonTeamHigh']   => would give you access to the nested data. 

Start firefox with firebug, press F12

at the console type: 

>>> var high = [{"somekey": [1,2,3,4,5]}];
undefined
>>> high
[Object { somekey=[5]}]
>>> high[0]
Object { somekey=[5]}
>>> high['somekey']
undefined
>>> high[0]['somekey']
[1, 2, 3, 4, 5]

Have fun

Jorge