Search code examples
javascriptangularjsangular-ngmodel

Set list items in ng-model in a dropdownmenu angularjs

currently I stuck with an angularjs problem. The following scenario:

I have a Game entity and a Team entity. One Game can hold multiple Team objects. (ManyToMany Relationship)

In my frontend application I want to add a new Game with optional Teams. For the Teams I decided to use two dropdown-menus (each menu for one team).

Now I am not able to give the ng-model the correct values.

I tried something like this but it might be wrong:

<select class="form-control" ng-options="team.teamname for team in teams 
track by team.id" ng-model="game.teams[0]">
  <option value="" selected>-- No Team --</option>
</select>

<select class="form-control" ng-options="team.teamname for team in teams 
track by team.id" ng-model="game.teams[1]">
  <option value="" selected>-- No Team --</option>
</select>

As soon as I click the save button i get an error message "400: Unable to process JSON":

Possibly unhandled rejection: {"data":{"code":400,"message":"Unable to process JSON"},"status":400,"config":{"method":"POST","transformRequest":[null],"transformResponse":[null],"jsonpCallbackParam":"callback","data":{"teams":{"0":{"id":1,"games":[{"id":1,"date":20180810}],"teamname":"BVB"},"1":{"id":2,"games":[{"id":1,"date":20180810}],"teamname":"FCB"}},"date":"20180810"},"url":"/api/games","headers":{"Accept":"application/json, text/plain, */*","Content-Type":"application/json;charset=utf-8"}},"statusText":"Bad Request"}

When creating the two Teams for a Game with Postman it works:

{
    "date": 20180810,
    "teams": [{"id": 1}, {"id": 2}]
}

Output:

{
  "id": 1,
  "date": 20180810,
  "teams": [
      {
          "id": 1,
          "games": [
              {
                  "id": 1,
                  "date": 20180810
              }
          ],
          "teamname": "BVB"
      },
      {
          "id": 2,
          "games": [
              {
                  "id": 1,
                  "date": 20180810
              }
          ],
          "teamname": "FCB"
      }
  ]
}

Any suggestions how to set the ng-model (Game) with the values of the first and second dropdown-menus? thanks

I have added a screenshot of the form that i want to have: enter image description here

Solution

  • If i understand well, when you do the request with postman, you send this:

    {
    "date": 20180810,
    "teams": [{"id": 1}, {"id": 2}]
}

    But your angular form is actually sending this:

    {
    "date": "20180810"
    "teams": {
        "0": {
            "id": 1,
            "games": [
                {
                    "id": 1,
                    "date": 20180810
                }
            ],
            "teamname": "BVB"
        },
        "1": {
            "id": 2,
            "games": [
                {
                    "id": 1,
                    "date": 20180810
                }
            ],
            "teamname": "FCB"
        }
    }
}

    While the date looks fine, your teams is an object but your backend is expecting an array. You also have additional informations in your teams (like games and teamname, but i can't know if this is a problem for your backend.

    Most of the time this kind of problems with Angularjs are not in the html template but in the controller. In your controller you should have something like this:

    scope.game = {
    date: 'something',
    teams: []
};

    I think your problem is that you don't initialize scope.game.teams as an array properly. So ng-model just initliaze it by itself with an object.