I am trying to create a small angular that takes a json file and displays the data on an html page. However I am getting the following error: POST bookmarks/data/bookmarks.json 405 (Method Not Allowed).
Here is my code:
<html lang="en" ng-app="bookmarksApp" id="ng-app">
<head>
<link rel="stylesheet" href="css/styles.css" />
</head>
<body ng-controller="BookmarkController as bookmarksCtrl">
<article class="main-content" role="main">
<section class="row">
<div class="content">
<div class="bookmarks-list">
<h1>Christine's Bookmarks</h1>
<ul>
<li ng-repeat="bookmark in bookmarksCtrl.bookmarks" class="">
<h3>{{bookmark.name}}</h3>
{{bookmark.url}}
</li>
</ul>
</div>
</div>
</section>
</article>
<script type="text/javascript" src="scripts/angular.min.js"></script>
<script type="text/javascript" src="scripts/main.js"></script>
</body>
</html>
and my angular code:
(function() {
var app = angular.module('bookmarksApp', []);
app.controller('BookmarkController', function($scope, $http) {
$http({ method: 'POST', url: 'data/bookmarks.json' }).success(function (data) {
console.log('hello');
$scope.bookmarks = data; // response data
}).
error(function (data) {
console.log(data);
});
});
})();
Any ideas where I am going wrong? Thanks.
Try to change the POST to GET.
Also fix the problem in ng-repeat
use
<li ng-repeat="bookmark in bookmarks" class="">
at the place of
<li ng-repeat="bookmark in bookmarksCtrl.bookmarks" class="">
If POST is not allowed try GET, if you have to use POST then you need to change backend to allow post requests
$http({ method: 'POST', url: 'data/bookmarks.json' }).success(function (data) {
Related
Closed. This question needs details or clarity. It is not currently accepting answers.
Want to improve this question? Add details and clarify the problem by editing this post.
Closed 1 year ago.
Improve this question
I have a problem with accessing json data via a jquery-ajax request in JavaScript. I keep hitting against a 'Cannot read property [0] of undefined' error that I get in G. Chrome's console. I have tried to refer to other features than feature '0', as well as not specifying any, but I still get not results when running my script on browser and searching for one of the json Sources (going from 0001 to 0012).
This is part of my education so I have to access the data in this specific way. I'll attach my code, which relies also on jquery-1.7.1.min.js and ol.js libraries. I'll be immensely grateful to whom will have a lead on what I'm doing wrong.
<script src="https://cdn.jsdelivr.net/gh/openlayers/openlayers.github.io#master/en/v6.5.0/build/ol.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.3.14/angular.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<div class="pagewrapper">
<div id="header"></div>
<div id="controls">
<h1>Controls</h1>
<div ng-app="myApp" ng-controller="locationController">
Enter SourceID(from 0001 to 0012):
<input ng - model="location.Source">
<button class="btn btn-default" ng - click="location.getElevation()">Search</button>
<p>Elevation: {{location.ele}}</p>
</div>
</div>
var mainApp = angular.module("myApp", []);
mainApp.controller('locationController', function($scope) {
$scope.location = {
Source: ('0001'),
getElevation: function() {
$.ajax({
url: 'https://services.arcgis.com/Sf0q24s0oDKgX14j/arcgis/rest/services/gpsData/FeatureServer/0/query?where=Source=' + $scope.location.Source + '&outFields=*&f=geojson',
method: 'GET',
success: function(response) {
$scope.location.ele = response.features[0].properties.ele;
$scope.$apply();
},
error: function() {}
})
}
}
})
Just ran your code. As other pointed, is important to run console.log on the results to debug. On your case, added a console.log at success's function
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml: lang="en-gb" lang="en-gb">
<head>
<meta http - equiv="content-type" content="text/html; charset=utf-8" />
<script src="https://cdn.jsdelivr.net/gh/openlayers/openlayers.github.io#master/en/v6.5.0/build/ol.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.3.14/angular.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<title> Trial
</title>
</script>
</script>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js">
</script>
</head>
<body>
<div class="pagewrapper">
<div id="header">
</div>
<div id="controls">
<h1> Controls
</h1>
<div ng-app="myApp" ng-controller="locationController">
Enter SourceID(from 0001 to 0012):
<input ng-model="location.Source">
<button class="btn btn-default" ng-click="location.getElevation()"> Search</button>
<p>Elevation: {{location.ele}}</p>
</div>
</div>
<script>
var mainApp = angular.module("myApp", []);
mainApp.controller('locationController', function($scope) {
$scope.location = {
Source: ('0001'),
getElevation: function() {
$.ajax({
url: 'https://services.arcgis.com/Sf0q24s0oDKgX14j/arcgis/rest/services/gpsData/FeatureServer/0/query?where=Source=' +
$scope.location.Source + '&outFields=*&f=geojson',
method: 'GET',
success: function(response) {
console.log(response)
$scope.location.ele = response.features[0].properties.ele;
$scope.$apply();
},
error: function() {}
})
}
}
})
</script>
</body>
</html>
It got a response like this:
But that is a string, not an object. Look a this log:
console.log(typeof response) // result is string
So you are trying to access a key on a string instead of a object, so you need to parse the string to an object, for example like this:
JSON.parse(response)
So it is really:
JSON.parse(response).features[0].properties.ele
That will make your code work:
EDIT: To access other data, you need to define the variable of the object you need at the function, and the render on the DOM. For example, latitude:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml: lang="en-gb" lang="en-gb">
<head>
<meta http - equiv="content-type" content="text/html; charset=utf-8" />
<script src="https://cdn.jsdelivr.net/gh/openlayers/openlayers.github.io#master/en/v6.5.0/build/ol.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.3.14/angular.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<title> Trial
</title>
</script>
</script>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js">
</script>
</head>
<body>
<div class="pagewrapper">
<div id="header">
</div>
<div id="controls">
<h1> Controls
</h1>
<div ng-app="myApp" ng-controller="locationController">
Enter SourceID(from 0001 to 0012):
<input ng-model="location.Source">
<button class="btn btn-default" ng-click="location.getElevation()"> Search</button>
<p>Elevation: {{location.ele}}</p>
<p>Latitude: {{location.lat}}</p>
</div>
</div>
<script>
var mainApp = angular.module("myApp", []);
mainApp.controller('locationController', function($scope) {
$scope.location = {
Source: ('0001'),
getElevation: function() {
$.ajax({
url: 'https://services.arcgis.com/Sf0q24s0oDKgX14j/arcgis/rest/services/gpsData/FeatureServer/0/query?where=Source=' +
$scope.location.Source + '&outFields=*&f=geojson',
method: 'GET',
success: function(response) {
$scope.location.ele = JSON.parse(response).features[0].properties.ele;
$scope.location.lat = JSON.parse(response).features[0].geometry.coordinates[1];
$scope.$apply();
},
error: function() {}
})
}
}
})
</script>
</body>
</html>
Will give you:
This question already has answers here:
Event binding on dynamically created elements?
(23 answers)
Closed 4 years ago.
I have index.html where there is nav menu, header, footer and div.content where jQuery parses html of page1.html.
page1.html loads fine, but when I add function to .nextPage2 to load page2.html, it wont work.
page1.html does not have head, body and script.
$( document ).ready(()=> {
//Ajax
$.ajax({
url: 'page1.html',
dataType: "html",
success: function(result){
$('.content').html(result);
}});
$(".nextPage2").click(()=>{
$(".content").html("");
$.ajax({
url: 'page2.html',
dataType: "html",
success: function(result){
$('.content').html(result);
}});
})
//Ajax
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
</head>
<body>
<nav class="navMenu">
<div class="container">
<div class="logo">
</div>
<ul>
<li class="page1">page</li>
<li class="page2">page</li>
<li class="page3">page</li>
</ul>
</div>
</nav>
<div class="container">
<div class="content">
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script type="text/javascript" src="script.js"></script>
</body>
</html>
<!--page1.html
<section class="page1">
Bunch of code without head, script, body etc
<button type="button" class="nextPage2" name="button">page2</button>
</section>
-->
Like #Justinas said, you need http://api.jquery.com/on/
$(document).on("click",".nextPage2",()=>{
$(".content").html("");
$.ajax({
url: 'page2.html',
dataType: "html",
success: function(result){
$('.content').html(result);
}});
})
I'm trying to get data from my json file for a small test project. I'm not getting any error in the developer tools and when I do console.log(data) after the request I get data from the file.
This is my angular code:
var app = angular.module('myApp', []);
app.controller('MainController', ['$scope','$http', function($scope, $http){
$scope.todos = [];
$http.get('db/todos.json')
.then(function(data){
$scope.todos = data;
});
}]);
This is my html file:
<!doctype html>
<html ng-app="myApp">
<head>
<base href="/">
<title>My todo</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<script src="https://code.angularjs.org/1.5.5/angular.js"></script>
<script src="/js/app.js"></script>
</head>
<body>
<div class="container" ng-controller="MainController">
<div class="row">
<h1>Your todos</h1>
<li ng-repeat="todo in todos">
{{ todo.name }}
<li>
</div>
</div>
</body>
</html>
In my site the ng-repeat just prints out six bullet points which is wrong because I've got only two entries in my json file. Also this is what I get from my console.log(data):
Object {data: Object, status: 200, config: Object, statusText: "OK"}
config: Object
data:Object
headers:(name)
status:200
statusText:"OK"
__proto__:Object
Any ideas of what I've probably missed?
When using .then the actual response data is in response.data, so your code works if you change it like this:
.then(function(response){
$scope.todos = response.data;
});
So I'm having an issue with my ng-repeat in my displayCtrl. I'm able to add objects to my $scope.votes array on an ajax call as intended, but that's not being automatically updated in the view. Thoughts? Here's my script:
var glassCongress = angular.module('glassCongress', []).run(function($rootScope){
$rootScope.votes = [];
}).controller('searchCtrl', function($scope, $rootScope, $http){
$(document).ready(function() {
$('#sendstuff').on('submit',function(event) {
event.preventDefault();
$.ajax({
url: '/search/' + $('#input').val(),
type: 'GET',
dataType: 'json'
}).done(function(data){
for(var voteIndex = 0; voteIndex < data.data.length; voteIndex++){
$rootscope.votes.push({
"voteValue": (data.data[voteIndex].option.value)
})
}
})
})
})
}).controller('displayCtrl', function($scope, $rootScope){
})
And here's my html:
<html ng-app="glassCongress">
<head>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.1/angular.min.js"> </script>
<script src="script.js"></script>
</head>
<body>
<div id="search" ng-controller = "searchCtrl">
<div>
<form id='sendstuff' action='senddata' method='get'>
<input id='input' type='text'/>
<input type="submit" value="Submit" />
</form>
</div>
</div>
<div id="display" ng-controller = "displayCtrl">
<div>
<ul>
<li ng-repeat="vote in votes"><span>{{vote}}</span></li>
</ul>
</div>
</div>
</body>
</html>
Thanks guys!
Your $.ajax call runs out of the angularjs scope. Becouse of that, anglarjs don't update the view automaticly.
There is tow possible solutions.
1 - use the $http module. You can replace the $.ajax call by $http call. Read the doc to get more information.
2 - after change your model in ajax callback, call the method $acope.apply() to force angularjs update your view.
Inset use $rootScope, you should use $scope.
I am trying the following code to call .asmx webserivce, however, its returning [object Object]
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title> </title>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.3/jquery.mobile-1.4.3.min.css" />
<script src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
<script src="http://code.jquery.com/mobile/1.4.3/jquery.mobile-1.4.3.min.js"></script>
<link rel="stylesheet" href="icon.css" type="text/css">
<script type="text/javascript" charset="utf-8" src="js/wormhole.js"></script>
<script type="text/javascript">
document.addEventListener(
"backbutton",
function()
{
mosync.app.exit();
},
true);
$(document).bind("mobileinit",function(){
$.mobile.page.prototype.options.addBackBtn = true;
$.mobile.allowCrossDomainPages=true;
$.support.cors= true;
});
$(document).ready(function(e) {
$.ajax({
url: 'http://webservice.gkg4.com/Test.asmx/HelloWorld',
type: 'POST',
crossDomain: true,
contentType: "application/json; charset=utf-8",
dataType: 'json',
success: function(result){
alert(result);
},
error: function(result){
alert(result);
}
});
});
</script>
</head>
<body>
<div data-role="page" id="home">
<div data-role="header">
<img src="image/png/chat.png" alt="image">
Menu
<div data-role="popup" id="popupPanel" >
<ul data-role="listview" data-inset="true" style="min-width:210px;" data-theme="b">
<li data-role="divider" data-theme="a">Menu</li>
<li>About Us</li>
<li>Contact Us</li>
<li><a href="#" id="chat" rel="external" >Live Chat</a></li>
<li>Exit</li>
</ul>
</div>
</div>
<div data-role="content" data-theme="b">
<div style="text-align:center">
</div>
<h4><center> Member's Login</center></h4>
</div>
<div data-role="footer" data-position="fixed">
<div data-role="navbar" data-iconpos="left">
</div>
</div>
</div>
</body>
</html>
The URL for webservice is live so you can check the same at your end.
Any help appreciated.
Code in in document.Ready section
Is the page where you are calling from also from webservice.gkg4.com? If not, it is illegal to call ajax from a different domain, and the alert that you are seeing is actually from the error handler.
Another problem is that the contentType is json, whereas the web service is returning XML.