Currently, I am facing an issue where instead of the JSON data (which consists of only 49 items) showing up on the DOM, I am getting {"readyState":1}. I believe this is just a test to ensure that my code is functioning correctly.
Although I have identified where the problem lies in my code, I am uncertain about what the correct syntax should be. Therefore, my query is regarding how I should define $scope.dogs to display the JSON data on the webpage. In the HTML, I have placed {{dogs}} within the 'mainCtrl' controller.
Below is the snippet from the JS file:
const app = angular.module('dogBreedApp', []);
app.controller('mainCtrl', function($scope) {
$scope.dogs = $.ajax(settings).done(function (response) {
});
});
var settings = {
"async": true,
"crossDomain": true,
"url": "https://dogdatabase-d31f.restdb.io/rest/dogs",
"method": "GET",
"headers": {
"content-type": "application/json",
"x-apikey": "xxxxxxxxxxxxxxxxxxxxxx",
"cache-control": "no-cache"
}
}
$.ajax(settings).done(function (response) {
console.log(response);
});
The content for the settings variable along with the ajax functionality was directly taken from the restdb.io service, which is the source of the JSON data. It successfully logs the JSON data without any issues.
Being new to development, I anticipate that the solution might be relatively straightforward.
Thank you!