Angular Data Structuring

Question

I am new to Angular, so apologies in advance if this seems an obvious question...

I know how to display a simple array of objects using the ng-repeat directive, but I'm not sure how to structure more complex layers of information.

For example: If I wanted to list Premier League football clubs, I could simply create an array of objects, the array listing clubs, with each club being an objects containing key-value pairs on various pieces of information or data relating to that club:

$scope.clubs = [

  {
    name: "Arsenal",
    nickname: "Gunners",
    clubBadge: "arsenal.jpg",
    founded: "1886"
  },
  {
    name: "Newcastle United",
    nickname: "Magpies",
    clubBadge: "newcastle.jpg",
    founded: "1892"
  } 
  // etc...
]

That's fine. But then what I might want to list the players within each club. For example:

  // the following being the team of Newcastle United...
  {
    GK: "Rob Elliot",
    LB: "Paul Dummett",
    CB: "Fabricio Coloccini",
    CB: "Chancel Mbemba",
    RB: "Daryl Janmaat",
    LW: "Andros Townsend",
    MF: "Georginio Wijnaldum",
    MF: "Jack Colback",
    RW: "Moussa Sissoko",
    ST: "Ayoze Perez",
    ST: "Aleksander Mitrovic",
  }; // and so on for other clubs...

How would I attach the above object to Newcastle Utd (and likewise for other clubs) in the original array, given that it is only a random index within an unordered array? What would be correct way of structuring this information holistically?

I could take this even further by providing stats on each individual player, such as:

  { // stats for Moussa Sissoko
    speed: "86",
    ballControl: "71",
    strength: "85",
    vision: "79"
  } 
  { // stats for Ayoze Perez
    speed: "78",
    ballControl: "83",
    strength: "69",
    vision: "78"
  }

Again, I have listed these as individual objects. But I don't know what array to link them to their respective clubs, or how to connect each array (assuming there were three separate arrays: $scope.clubs, $scope.players, $scope.attributes).

If Newcastle Utd is the 10th club in the array, it would be $scope.clubs[9], but I don't want to have to create an entirely new array for the players that has no link to the $scope.clubs[] array. Ideally I want it all to be connected.

Is ng-repeat sufficient to access the model data in these cases or would a more sophisticated directive be required? I'm looking to build the information so it is easy to update and display the data in the view.

Sorry this is a little long-winded - if I knew how to phrase my problem more succinctly, I would!

Any advice here would be massively appreciated. Thanks in advance.

score 0 · Answer 1 · answered Jan 26 '16 at 21:30

0

Var clubs = [
    {
         Name : "clubname",
         Players: [
              {
                    Name: "name"
              },
              {
                    Name:"othername"
              }

          ];
    }
];

enter code here

answered Jan 26 '16 at 21:30

JoeriShoeby

1,374
10
15

1

Take the time of explaining why it's better to use this datastructure. The OP is not likely to understand just be seing a bunch of JSON (from reviews) – Eloims Jan 27 '16 at 08:02

score 0 · Answer 2 · edited May 23 '17 at 11:52

You can put objects inside objects, with you example will look like this:

$scope.clubs = [
{
    name: "Arsenal",
    nickname: "Gunners",
    clubBadge: "arsenal.jpg",
    founded: "1886",
    players: [
         {
             //all the player stuff
         },
         {
             //Other player stuff
         }
         //Continue with all the players
    ]
},
{
    name: "Newcastle United",
    nickname: "Magpies",
    clubBadge: "newcastle.jpg",
    founded: "1892",
    players: [
         {
             //all the player stuff
         },
         {
             //Other player stuff
         }
         //Continue with all the players
    ]

} 
// etc...
]

And you can access like this $scope.clubs[0].players, I recommend you to give the clubs an Id, that way is going to be much easier to play with the data. To do this, if you have access to the source you can add it from there, if not, you could use foreach loop on the object and add the Id property

Thanks. As is often the case, seems so simple now you've explained it! Appreciate your help. Although not sure how to add Id in Angular... — Paulos3000, Jan 30 '16 at 20:30

Angular Data Structuring

2 Answers2