Pull spezifischen Wert von $ http angularjs

Question

Web-API ist verbunden und funktioniert gut, holen und zeigt die Daten richtig. jetzt brauchen die Karte (map-Box) mit spezifischer Koordination durch API

JS

function frmccode() { 
    var path_cc = api + vm.ccode; 

    $http({ 
    method: 'GET', 
    url: path_cc, 
    headers: { 
     'Authorization': 'Bearer ' + bearer.token 
    } 
    }).then(function(resp) { 
    $scope.itemsc = resp.data; 
    }).catch(function(err) { 
    $scope.err = err.status; 
    if ($scope.err === 404) { 
     $scope.ccerror = err.status; 
    } 
    }); 
} 

var map = new mapboxgl.Map({ 
    zoom: 6, 
    center: [54, 24], 
    container: 'map', 
    style: 'http://abcd.com/api/gis/style', 
}); 

HTML

<table class="table"> 
    <tbody ng-repeat="item in itemsc"> 
     <tr> 
     <div id="map" style="height: 300px; width: 100%;"></div> 
     </tr> 
     <tr> 
     <th>GPS</th> 
     <td>Latitude: {{item.latitude}} | Longitude: {{item.longitude}}</td> 
     </tr> 
    </tbody> 
    </table> 

Web-API

"latitude": {}, 
"longitude": {} 

zeigen

Breite/Länge. zeigt sich gut in HTML, aber wie kann lat/lang ziehen. aus ** resp.data * und übergeben Sie es in der Kartenfunktion?

Answer 1

Der Rückgabewert ist in Array. sollte so sein ....

var lat = resp.data[0].latitude; 

Danke Jungs :)

Answer 2

Ich würde die Karte in eine Richtlinie verwandeln. Etwas wie:

myDirectives.directive('myMap', function() { 
    return { 
     restrict: 'A', 
     scope: { lat: '=', long: '='}, 
     link: function (scope, element, attrs) { 
     //lat long available here (2 way binding) 
     var map = new mapboxgl.Map({ 
      zoom: 6, 
      center: [54, 24], 
      container: attrs.container, 
      style: 'http://abcd.com/api/gis/style', 
     }); 

     } 
    }; 
    }); 

Und Sie es wie dieser es

<table class="table"> 
    <tbody ng-repeat="item in itemsc"> 
     <tr> 
     <div my-map id="map" container="map" lat="item.latitude" long="item.longitude" style="height: 300px; width: 100%;"></div> 
     </tr> 
     <tr> 
     <th>GPS</th> 
     <td>Latitude: {{item.latitude}} | Longitude: {{item.longitude}}</td> 
     </tr> 
    </tbody> 
    </table> 

Answer 3

Versuchen Sie, in Callback-Funktion verwenden können. Schleife durch Artikel,

var el = document.createElement('div'); 
el.className = 'marker'; 
el.style.backgroundImage = 'url(' + img_url + ')'; 


new mapboxgl.Marker(el) 
    .setLngLat([item.lng, item.lat]) 
    .addTo(map);