Pushing Values from JSON Object into Array

Question

I have the following object in my AngularJS Controller:

  {"team":"1","name":"abc","age":"20"},
  {"team":"1","name2":"def","age2":"21"},
  {"team":"2","name":"ghi","age":"22"},
  {"team":"2","name2":"jkl","age2":"23"},

I need to group the items into one array object, by the team key.

  {
   "team": [
     {"name1":"abc","age1":"20", "name2":"def", "age2":"21"},
     {"name1":"ghi","age1":"22", "name2":"jkl", "age2":"23"}
   ]
  }

So I can later use the information like $scope.data.team[1].name2

EDIT: One Team always consists of 4 players by the way. How would I do this?

and I suggest you should use a structure, where you can access a player by its key instead of different names of the property. then it's also possible to loop over all players with ng-repeat as example. — Raphael Müller
– Raphael Müller, Commented Feb 26, 2015 at 9:57
As @RaphaelMüller already mentions, you should make a uniform structure for the player entity. {team: "", name: "", age:"" }would suit your needs — thomaux
– thomaux, Commented Feb 26, 2015 at 9:59
I'm filling up an angular-schema-form, in which I need exactly this structure. I know it's far from perfect.. Unfortunately :( — ManuKaracho
– ManuKaracho, Commented Feb 26, 2015 at 10:02
i think then the form is not angular enough. if you use ng-repeat to build the form, and bind to the values, you should be fine. — Raphael Müller
– Raphael Müller, Commented Feb 26, 2015 at 10:05

Raphael Müller · Accepted Answer · 2015-02-26 12:29:30Z

edit: working plunkr for your needs: http://plnkr.co/edit/zxoOYV?p=preview

you should rearrange your structure. i.e. you could go for something like this:

{"team": [
    {"players": [
        {"name" : "abc", "age": 20},
        {"name" : "def", "age": 34},
    ]},
    {"players": [
        {"name" : "abc", "age": 20},
        {"name" : "def", "age": 34},
    ]}
]}

if you use this structure in your controller:

$scope.team = {...}

and use it in your html like:

<div ng-controller="TeamController">
    <div ng-repeat="players in team">
       <div ng-repeat="player in players">
          <div>Name: {{player.name}}</div>
          <div>Name: {{player.age}}</div>
       </div>
    </div>
</div>

so, for your example, i got the angular-schema-form working.

with the above structure the schema looks like this:

[
  {
    "type": "help",
    "helpvalue": "<h4>Tabbed Array Example</h4><p>Tab arrays can have tabs to the left, top or right.</p>"
  },
  {
    "key": "team",
    "type": "tabarray",
    "add": "New",
    "remove": "Delete",
    "style": {
      "remove": "btn-danger"
    },
    "title": "value.name || 'Team '+$index",
    "items": [
        {
        "key": "team[].players",
        "title": "Players",
        "items": [
          {
            "key": "team[].players[].name",
            "title": "Name"
          },
          {
            "key": "team[].players[].age",
            "title": "Age"
          }
    ]
  }
    ]
  },
  {
    "type": "submit",
    "style": "btn-default",
    "title": "OK"
  }
]

and the corresponding schema:

{
  "type": "object",
  "title": "Team",
  "properties": {
    "team": {
      "type": "array",
      "items": {
        "type": "object",
        "properties": {
            "players": {
              "type": "array",
              "maxItems": 4,
              "items": {
                "type": "object",
                "properties": {
                  "name": {
                    "type": "string"
                  },
                  "age": {
                    "type": "integer"
                  }
                },
                "required": [
                  "name",
                  "age"
                ]
              }
            }
        },
        "required": [
          "players"
        ]
      }
    }
  }
}

thanks. I know, but I need exactly my structure to fill up an angular-schema-form which is being rendered from JSON
@user2556555 if this solution doesn't solve your problem, please add some more informations to your question.
angular-schema-form can render bootstrap forms dynamically from json. I need a form, in which some inputs are rendered into different tabs. Each tab represents one team (team[]). I know the structure is not perfect, but angular-schema-form won't accept any other kind of structure, so I just need a code snip to rearrange my json object - coming from an excel sheet
as i can see, my version should be doable with this angular-schema-form. there is a sample where you can try a tab array, looks similar to what you want to do
I sat on the rendering structure for a whole day, and it won't render correctly with another kind of data structure. please refer to my question how to rearrange a json object.

Collectives™ on Stack Overflow

Pushing Values from JSON Object into Array

1 Answer 1

6 Comments

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

6 Comments

Related