AngularJS - Dostęp do zmiennej globalnej - dane JSON Opcje

[LowiczakPL]

Jako naukę angulara wybrałem sobie za zadanie napisanie prościutkiej gry
na WWW: http://gra.w16.pl/angular/
na GITHUBie: https://github.com/RobertRorog/appGame

Mam problem ze zmienną globalną, wczytuję tablicę z wartościami z pliku JSONa i nie mogę się do nich dostać w żaden sposób w aplikacji.


<script>
var app = angular.module('myApp', []), global={};
app.controller('customersCtrl', function($scope, $http) {


$http.get("customers.php").then(function (response) {
$scope.myData = response.data.records;
global.obj = response.data.records;
console.log(global); // tu jest OK JSON ladnie sie wczytal
});

console.log(global); // ale potrzebuje tu sie dostac do wartosci i nie sa widoczne

});
</script>

Ten post edytował LowiczakPL 22.03.2016, 14:35:08

[nospor]

A w konsoli w jakiej kolejnosci widzisz console.log ?

[LowiczakPL]

no faktycznie najpierw widzę to co potrzebuje a dopiero to co jest wczytanie

pusty obiekt

request get

pełny obiekt

jak to zmienić aby poczekać na get i odwołać się do obiektu po wykonaniu requestu?

Ten post edytował LowiczakPL 22.03.2016, 13:03:32

[nospor]

Po to wlasnie jest .then by zlapac co po zakonczeniu requestu, Czemu tam nie zrobisz co masz zrobic?

[LowiczakPL]

kombinuję na różne sposoby ale poza funkcją wczytania JSONA dane nie są widoczne

mam fabrykę z then i w niej jest ok ale poza już nie widać nic, za słaby jeszcze jestem w JSie

[HTML] pobierz, plaintext 
    factoryMinesData.getData().then(function(data){  
        $scope.listOfMines = data[1];
       $scope.resGold = data[1][0].resources.res;
       $scope.resStone = data[1][1].resources.res;
       $scope.resWood = data[1][2].resources.res;
       $scope.resStorage = data[1][3].resources.res;
       console.log(data[1]);
    });
 
    console.log($scope.listOfMines); // nie wiczać
[HTML] pobierz, plaintext 

[nospor]

Zrozum wkoncu, ze to jest AJAX i jest ASYNCHRONICZNY. Po to wlasnie jest THEN by w nim robic wszystko co ma sie robic po wczytaniu ajax. Czemu nie chcesz tego zrobic THEN tylko sie upierasz i ciagle robisz poza THEN??

[LowiczakPL]

Nie upieram się tylko z mojej niewiedzy chciałem mieć globalny dostęp do obiektu tablicy JSON po jej wczytaniu.

Dzięki za podpowiedź.

[nospor]

I masz po jej wczytaniu. Ino tylko ze wczytanie nastepuje pozniej niz ci sie wydawalo

[LowiczakPL]

No to w takim razie będę cierpliwie czekał na wczytanie danych

Dam jakiś interwał i sprawdzanie czy wszystkie dane JSON wczytały się, a userowi dam spinnera, co sądzisz o takim rozwiązaniu?

[nospor]

No ale czy ty czytasz co sie do ciebie pisze? THEN sie odpala po wczytaniu i juz. NIe musisz robic zadnych interwalow....

W przypadku AJAX przestan myslec staroswiecko LINI PO LINII. AJAX sie tak nie wykonuje. Po to wymyslono wiec THEN i on sie odpali po wykonaniu AJAX. ALe kod co miales poza THEN odpali sie duzo wczesniej. DLatego swojej rzeczy masz zrobic w THEN

[LowiczakPL]

Dzięki za dogłębne wytłumaczenie problemu i naprowadzanie mnie mimo mojej upartości. Wstawiam moje rozwiązanie, może komuś się przyda.



To jest ładowarka JSONÓW i inicjalizacja strony

[HTML] pobierz, plaintext 
$scope.loadFeed = function() {
 
            factoryMinesData.getData().then(function(data){  
                $scope.listOfMines   = data[1];
 
                return data;
            }).then(function(data){  
               $scope.listDataMines   = data[0];
 
                return data;
            }).then(function(data){
                console.log($scope.listOfMines);   // jest OK
                console.log($scope.listDataMines); // jest OK
 
                $('#mydiv').hide();  
            });  
	}
 
	$scope.loadFeed();
[HTML] pobierz, plaintext 

to jest SPINNER na stronie

[HTML] pobierz, plaintext 
<div id="mydiv">
    <img src="assets/img/ajax-loader.gif" class="ajax-loader"/>
</div>
 
<style>
#mydiv {  
    position:absolute;
    top:0;
    left:0;
    width:100%;
    height:100%;
    z-index:1000;
    background-color:grey;
    opacity: .8;
 }
 
.ajax-loader {
    position: absolute;
    left: 50%;
    top: 50%;
    margin-left: -32px; /* -1 * image width / 2 */
    margin-top: -32px;  /* -1 * image height / 2 */
    display: block;     
}
</style>
[HTML] pobierz, plaintext