$http.get returning an old query after doing $http.post, what am i doing wrong?

Question

I'm a newbee in angular, currenty I'm working in a website that saves the score of players in a postgres database, before inserting in the table "Puntaje" I have to save the id of the game and the id of the player into another table, my code actually does that, but when I try to retrieve the last inserted ID in such table, it returns a query as if it didn't insert the key, although in the database it shows that it was inserted, here is the code:

angular.module('clienteJuegoApp').controller('Juego1Ctrl', function ($scope, $http){
$scope.juego = "Survive";
$scope.add = function(){

    //First part, saves the gameID and the Player ID into the 1st table
    console.log($http.get('http://127.0.0.1:8080/v1/jugador').then(function(response) {
    console.log($scope.d = response.data);
    console.log("long"+$scope.d.length);
    console.log("idjugaor"+$scope.d[$scope.d.length-1].Id);
    var datosJuegoJugador={
      idjuego: {Id:1},
      idjugaor:{Id:$scope.d[$scope.d.length-1].Id}
    };
    $http.post("http://127.0.0.1:8080/v1/juegojugador", datosJuegoJugador);
    console.log("se inserto");


    //Second part, retrieve the last inserted Id of the previous table 

    console.log($http.get('http://127.0.0.1:8080/v1/juegojugador').then(function(response2) {
    console.log($scope.dj = response2.data)
    console.log("idjuegojugador:"+$scope.dj[$scope.dj.length-1].Id)

    var data = {
        Idjuegojugador: {Id: $scope.dj[$scope.dj.length-1].Id},
        Puntaje: parseInt($("input:text[name=puntaje]").val())
    };

    console.log(data)
    $http.post("http://127.0.0.1:8080/v1/puntaje", data);
    }))
}))}

Why does it happen? How can I fix it? Thanks in advance.

Answer 1

$http.post and $http.get are asynchronous. You need to call get after post is finished. Use then after post and inside callback call get.

Answer 2

As you are making multiple asynchronous requests which are depending on the result of each other you need to make sure that each and every request is completed before moving on to the next one.

To do this you can use the promise that $http returns and add the depending calls in the then callback function as this

angular.module('clienteJuegoApp').controller('Juego1Ctrl', function ($scope, $http){
    $scope.juego = "Survive";
    $scope.add = function(){

        $http.get('http://127.0.0.1:8080/v1/jugador')
            .then(function(response) {
                $scope.d = response.data);
                var datosJuegoJugador={
                  idjuego: {Id:1},
                  idjugaor:{Id:$scope.d[$scope.d.length-1].Id}
                };

                $http.post("http://127.0.0.1:8080/v1/juegojugador", datosJuegoJugador).then(function(response2) {

                    $http.get('http://127.0.0.1:8080/v1/juegojugador').then(function(response3) {
                        $scope.dj = response3.data
                        var data = {
                            Idjuegojugador: {Id: $scope.dj[$scope.dj.length-1].Id},
                            Puntaje: parseInt($("input:text[name=puntaje]").val())
                        };
                        $http.post("http://127.0.0.1:8080/v1/puntaje", data);
                    });
                });
        });
    });

});