I am trying to implement a function where user searches for a ship, which sends a fetch request to the backend for fetching data of that ship from database, from which co-ordinates of that ship and then display them on map. But I keep getting cannot read property of undefined, even when backend is sending the data (I am using SpringBoot for the backend and Postgre is the database).
Angular Module script –
let myAngular = angular.module('searchApp', [])
myAngular.controller('SearchController', function($scope, $rootScope) {
$scope.check = false;
$scope.searchResult = '';
$scope.searchValues = function() {
var searchText = document.getElementById('mySearch').value;
fetch(`/shipdata/${searchText}`)
.then(response => response.json())
.then(data=>{
$scope.searchResult = data;
$scope.check = true;
console.log($scope.searchResult)
})
.catch(error => {
console.error('An error occurred while fetching:', error);
$scope.searchResult = 'Error occurred while fetching data';
}
);
}
let setValues = function (){
if ($scope.searchResult &&
$scope.searchResult.positionReportDTO &&
$scope.searchResult.shipStaticDataDTO &&
$scope.searchResult.positionReportDTO.Longitude &&
$scope.searchResult.positionReportDTO.Latitude &&
$scope.searchResult.shipStaticDataDTO.ShipName) {
$rootScope.shipLocation = {
latitude: $scope.searchResult.positionReportDTO.Latitude,
longitude: $scope.searchResult.positionReportDTO.Longitude,
shipname: $scope.$scope.searchResult.shipStaticDataDTO.ShipName
};
} else {
console.log("VALUES NOT FOUND")
}
};
function checkAndDo() {
if (!$scope.check) {
setTimeout(checkAndDo, 100); // Check again after 100 milliseconds
} else {
setValues();
}
}
checkAndDo();
$scope.plot = function(){
{
let myIcon = L.icon({
iconUrl: '../images/ship.png',
iconSize: [38, 95], // size of the icon
iconAnchor: [22, 94], // point of the icon which will correspond to marker's location
popupAnchor: [-3, -76] // point from which the popup should open relative to the iconAnchor
});
$scope.plotLatitude = $rootScope.shipLocation.latitude
$scope.plotLongitude = $rootScope.shipLocation.longitude
$scope.plotShipName = $rootScope.shipLocation.shipname
console.log($scope.plotLatitude, $scope.plotLongitude)
L.marker([$scope.plotLatitude, $scope.plotLongitude], {icon: myIcon}).addTo(map).bindPopup('Ship Name: ' + $scope.plotShipName).openPopup()
map.setView($scope.plotLatitude, $scope.plotLongitude)
}
}
});
Please can anyone help me understand what might be causing the error, and how to fix it