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:
Related
I'm trying to call a function in click function from my html page ,
added all typescript definition files from nuget but something is going wrong
My Click Function is not Working .... No error in console even
Here is my Hrml and Controller Code
Html Page
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<script src="Scripts/angular.js"></script>
<script src="test.js"></script>
<title></title>
</head>
<body ng-app="testModule">
<div ng-controller="test">
<input type="button" ng-click="click()" value="test" />
</div>
</body>
</html>
Controller
angular.module("testModule", []);
class test {
constructor() { }
click() {
alert();
}
}
angular.module("testModule").controller("test", test );
This does not work because ng-click="click()" tries to call $scope.click() which is not defined.
I would highly advise you to use the controller as-Syntax when working with AngularJS and Typescript
Demo
Here is the corrected code. Don't mark this as the answer, #Aides got here before me.
Html Page
<!DOCTYPE html>
<html> <!-- its 2016 -->
<head>
<script src="Scripts/angular.js"></script>
<script src="test.js"></script>
<title></title>
</head>
<body ng-app="testModule">
<div ng-controller="Test as test">
<input type="button" ng-click="test.click()" value="test" />
</div>
</body>
</html>
Controller
angular.module("testModule", []);
class Test {
click() {
alert();
}
}
angular.module("testModule").controller("Test", Test );
I want to pass a parameter to the next page onclick of a button.
I have tried as below; on the first page I have a textarea and I want to pass that value to the next page on button click using AngularJS, I have tried as below, but it's not working.
index.html
<!doctype html>
<html ng-app="project">
<head>
<title>Angular: Service example</title>
<script src="http://code.angularjs.org/angular-1.0.1.js"></script>
<script src="sample.js"></script>
</head>
<body>
<div ng-controller="FirstCtrl">
<h2>{{name}}</h2>
<input ng-model="thing.x"/>
</div>
<input type="button" value="send" onclick="send()">
<script>
function send(){
window.location ="second.html";
}
</script>
</body>
</html>
sample.js
/*
* To change this license header, choose License Headers in Project Properties.
* To change this template file, choose Tools | Templates
* and open the template in the editor.
*/
var projectModule = angular.module('project',[]);
projectModule.factory('theService', function() {
return {
thing : {
x : 100
}
};
});
function FirstCtrl($scope, theService) {
$scope.thing = theService.thing;
$scope.name = "First Controller";
}
function SecondCtrl($scope, theService) {
$scope.someThing = theService.thing;
$scope.name = "Second Controller!";
}
second.html
<!DOCTYPE html>
<!--
To change this license header, choose License Headers in Project Properties.
To change this template file, choose Tools | Templates
and open the template in the editor.
-->
<html>
<head>
<title>Passed data</title>
<script src="sample.js"></script>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width">
</head>
<body>
<div ng-controller="SecondCtrl">
<h2>{{name}}</h2>
<input ng-model="someThing.x"/>
</div>
<br>
</body>
</html>
Please can you help me to figure it out?
First read this https://docs.angularjs.org/guide/$location
Remove send() function
function FirstCtrl($scope, $location, theService) {
$scope.thing = theService.thing;
$scope.name = "First Controller";
$scope.send = function(){
$location.path('/second').search({id: 12});
};
}
<input type="button" value="send" ng-click="send()">
To send the parameter to next page you have to use $location service.
$location.path('/second').search({id: 12});
But again this will not work for you as you are not using AngularJS for routing , you are using JS for that. I suggest following this PhoneCatApp to learn Angular basics
My goal is to spin a servo for a certain amount of seconds on a HTML button click. I am using an Arduino Yun as my microcontroller.
When I type in the URL directly the servo spins as it should. When I click on these buttons using the Angular.js GET request nothing happens. Even a regular form submit button works.
Is there something missing from my code?
Is there an easier way to accomplish this?
Here is my front-end code:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap.min.css">
<script src="jquery-1.11.1.min.js"></script>
<script src="http://code.angularjs.org/1.2.6/angular.min.js"></script>
<title>winner's cat Feeder</title>
</head>
<body>
<div ng-controller="ArduinoCtrl" class="container">
<button ng-click="setServo(1)" class="btn">3 Seconds(Food)</button>
<button ng-click="setServo(2)" class="btn">9 Seconds(Food)</button>
</div>
</body>
</html>
<script type="text/javascript">
function ArduinoCtrl($scope, $http)
{
$scope.setServo = function (setting)
{
var url = "http://192.168.1.79/arduino/" + setting
$http.get(url);
}
}
</script>
If I just type in the URL in my browser with the setting value of 1 or 2 the servo works fine.
Please see working demo
var app = angular.module('app', []);
app.controller('ArduinoCtrl', function($scope, $http) {
$scope.response = {};
$scope.progress = false;
$scope.setServo = function(setting) {
$scope.progress = true;
var url = "http://192.168.1.79/arduino/" + setting
$http.get(url).then(sucess, error).then(function() {
$scope.progress = false;
});
function sucess(response) {
angular.copy(response, $scope.response)
}
function error(response) {
angular.copy(response, $scope.response)
}
}
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
<div ng-app="app">
<div ng-controller="ArduinoCtrl" class="container">
<button ng-click="setServo(1)" class="btn">3 Seconds(Food)</button>
<button ng-click="setServo(2)" class="btn">9 Seconds(Food)</button>
<p ng-show="progress">Please wait</p>
<div ng-hide="progress">
<hr/>
<p>Response</p>
<pre>{{response | json}}</pre>
</div>
</div>
</div>
You need to add the ng-app directive and add your controller to a module:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap.min.css">
<script src="jquery-1.11.1.min.js"></script>
<script src="http://code.angularjs.org/1.2.6/angular.min.js"></script>
<title>winner's cat Feeder</title>
</head>
<body ng-app="myApp">
<div ng-controller="ArduinoCtrl" class="container">
<button ng-click="setServo(1)" class="btn">3 Seconds(Food)</button>
<button ng-click="setServo(2)" class="btn">9 Seconds(Food)</button>
</div>
</body>
</html>
<script type="text/javascript">
function ArduinoCtrl($scope, $http)
{
$scope.setServo = function (setting)
{
var url = "http://192.168.1.79/arduino/" + setting
$http.get(url);
}
}
angular.module("myApp", []).controller("ArduinoCtrl", ArduinoCtrl);
</script>
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) {
I'm using backbone marionette with server node.js - sails.js.
I have following code in index.ejs:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
</head>
<body>
<div id="header-region"></div>
<div id="main-region" class="container">
<p></p>
</div>
<script type="text/template" id="admin">
<div > <%= name %> </div>
</script>
</body>
</html>
The template should be called here:
templateHelpers: {
getData: function(){
require(["apps/models/userRole"]);
data = App.request("userRole:role", this);
var compiled = _.template($("#" + data.name).html(), this);
return compiled;
}
},
But when the index.ejs being loaded(and not when I call it in the templateHelper) I'm getting an error: name is not defined
As I know, it should be run only when it called! or maybe there is a difference with it between html and ejs?