Вытянуть определенное значение из $ http angularjs

Question

Веб-интерфейс API подключен и работает нормально, извлечение и отображение данных должным образом. теперь нужно показать карту (окно) с определенной координацией через 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> 

веб API

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

Lat/Long. отображается в HTML, , но как можно тянуть lat/long. от ** resp.data * и передать его в функцию карты?

Answer 1

Возвращаемое значение находится в массиве. должно быть, как это ....

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

Спасибо, ребята :)

Answer 2

Я бы превратил карту в директиву. Что-то вроде:

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', 
     }); 

     } 
    }; 
    }); 

И вы можете использовать его как этот

<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

Попробуйте внутри функции обратного вызова. Loop through itemsc,

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);