JSON変換問題角度

Question

を使用してFirebaseからデータを返すときに、私はFirebaseからデータを取得していると私はこのようにJSONに変換するとき：

["{ "lat": "50", "lon": "3", "title": "my title", "content": "my content" }"] 

私はどのように変換します：

$scope.array.push(angular.toJson(obj)); 

私はこれを取得私はこれを取得するように、それは：私の角度指令で

[{ "lat": "50", "lon": "3", "title": "my title", "content": "my content"}] 

を、私はそれとそれをconsole.logとき、私はデータを参照してください次のように表示されますので、実行するための私のコードを取得するために、私は "を必要とする

[] 0 {key : "value"}

：私は$scope.array.push(obj);をすればFirebaseからデータを取得するために

[] 
    0: "{ "lat": "50", "lon": "3", "title": "my title", "content": "my content" }" 

、私はこれを取得しますキーも引用符で囲みます。

他の問題は、データがscope.arrLocations変数に返される前に、私の指示文のlink関数が実行されていることです。この変数の変更を受け入れることを期待しているwatchがあります。だから私はデータが正しくフォーマットされたら、それはうまくいくと思っていました。

はここに完全に私のコードです：

app.factory('map', ['$q', function($q){ 

    var map={}; 
    var mapInfoItems=[]; 

    map.getMapInfo = function() { 
     var deferred = $q.defer(); 
     var mapitems = firebase.database().ref('mapinfo/'+firebase.auth().currentUser.uid); 
     mapitems.on('child_added', function(snapshot){ 
      mapInfoItems.push(snapshot.val()); 
      deferred.resolve(mapInfoItems); 
     }); 

     //return mapInfoItems; 
     return deferred.promise; 
    }; 

    return map; 

}]); 



app.controller('mapController', ['$scope', 'map', function($scope, map){ 
     $scope.myLocations = {}; 
     $scope.arrLocations = []; 
     var allLocations = []; 
     //$scope.arrLocations = [ { "lat": "50", "lon": "3", "title": "my title", "content": "my content" }]; 
     $scope.mapLocations = map.getMapInfo(); 

     map.getMapInfo().then(function(locations){ 

      for(var i=0; i<locations.length; i++){ 
       // create new object each iteration 
       var obj ={ 
        title : locations[i].name, 
        content: locations[i].message, 
        lat : locations[i].lat, 
        lon : locations[i].lon 
       }  
       allLocations.push(obj); 
      } 

      $scope.arrLocations = allLocations; 
     });  
}]); 




app.directive('myMap', [function() { 

    // directive link function 
    var link = function(scope, element, attrs) { 
     //console.log(scope.myLocations); 
     console.log('in the link function'); 

     //the line below works and the marker is shown on the map 
     //scope.arrLocations = [ { "lat": "50", "lon": "3", "title": "my title", "content": "my content" }]; 
     //console.log(scope.arrLocations); 

     var map, infoWindow; 
     var markers = []; 
     //var lastElement = ''; 
     // map config 
     var mapOptions = { 
      // center: new google.maps.LatLng(50, 3), 
      center: new google.maps.LatLng(scope.lastElement.lat, scope.lastElement.lon), 
      zoom: 10, 
      mapTypeId: google.maps.MapTypeId.ROADMAP, 
      scrollwheel: true 
     }; 

     // init the map 
     function initMap() { 
      if (map === void 0) { 
       map = new google.maps.Map(element[0], mapOptions); 
      } 
     }  

     // place a marker 
     function setMarker(map, position, title, content) { 
      var marker; 
      var markerOptions = { 
       position: position, 
       map: map, 
       title: title, 
       icon: 'https://maps.google.com/mapfiles/ms/icons/green-dot.png' 
      }; 

      marker = new google.maps.Marker(markerOptions); 
      markers.push(marker); // add marker to array 
      google.maps.event.addListener(marker, 'click', function() { 
       // close window if not undefined 
       if (infoWindow !== void 0) { 
        infoWindow.close(); 
       } 
       // create new window 
       var infoWindowOptions = { 
        content: content 
       }; 
       infoWindow = new google.maps.InfoWindow(infoWindowOptions); 
       infoWindow.open(map, marker); 
      }); 
     } 

     scope.$watch(function() { return scope.arrLocations; }, function() { 
      initMap(); 
      console.log(scope.arrLocations); 
      scope.lastElement = scope.arrLocations[scope.arrLocations.length - 1]; 
      // clear markers 
      for (var i = 0; i < markers.length; i++) { 
      markers[i].setMap(null); 
      } 
      markers = []; 

      angular.forEach(scope.arrLocations, function(value, key){ 
      //console.log('value: ' + value + ' | key: ' + key); 
      // a single object in this example could be: 
      // { lat: 50, lon: 3, title: "my title", content: "my content" } 
      var location = new google.maps.LatLng(value.lat, value.lon); 
      setMarker(map, location, value.title, value.content); 
      }); 


     }); 
    }; 

    return { 
     restrict: 'EA', 
     //scope: {getMapFn: '&'}, 
     template: '<div id="gmaps"></div>', 
     replace: true, 
     link: link 

    }; 
}]); 

Answer 1

だけ

変更配列にオブジェクト自身をプッシュする...オブジェクトを文字列化しないでください。

$scope.array.push(angular.toJson(obj)); 

へ

$scope.array.push(obj); 

あなたがデータが配列にプッシュされる前に長さをチェックしようとしているような長さのnsoleログ。データリクエストが受信される前である可能性が最も高いです。

Answer 2

私の既存のコードを使用してください。代わりにthisを使用することを決定しました。