通过 jQuery ajax 请求访问嵌套的 JSON 数据
Accessing nested JSON data via jQuery ajax request
我在 JavaScript 中通过 jquery-ajax 请求访问 json 数据时遇到问题。我一直在遇到 G.Chrome 控制台中出现的“无法读取未定义 的 属性 [0]”错误。我试图引用功能“0”以外的其他功能，也没有指定任何功能，但是当 运行 我在浏览器上的脚本并搜索 json 来源之一时，我仍然没有得到结果（从 0001 到 0012）。
这是我受教育的一部分，所以我必须以这种特定方式访问数据。我将附上我的代码，它也依赖于 jquery-1.7.1.min.js 和 ol.js 库。我将非常感谢谁能指导我做错什么。
<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() {}
})
}
}
})
只需 运行 您的代码。正如其他指出的那样，重要的是 运行 console.log 对结果进行调试。根据您的情况，在成功函数
处添加了一个 console.log
<!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>
它得到了这样的回应：
但那是一个字符串，不是一个对象。查看此日志：
console.log(typeof response) // result is string
因此您试图访问字符串而不是对象上的键，因此您需要将字符串解析为对象，例如：
JSON.parse(response)
原来是这样：
JSON.parse(response).features[0].properties.ele
这将使您的代码工作：
EDIT: 要访问其他数据，需要在函数定义你需要的对象的变量，在DOM上渲染。例如纬度：
<!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>
会给你：
我在 JavaScript 中通过 jquery-ajax 请求访问 json 数据时遇到问题。我一直在遇到 G.Chrome 控制台中出现的“无法读取未定义 的 属性 [0]”错误。我试图引用功能“0”以外的其他功能，也没有指定任何功能，但是当 运行 我在浏览器上的脚本并搜索 json 来源之一时，我仍然没有得到结果（从 0001 到 0012）。
这是我受教育的一部分，所以我必须以这种特定方式访问数据。我将附上我的代码，它也依赖于 jquery-1.7.1.min.js 和 ol.js 库。我将非常感谢谁能指导我做错什么。
<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() {}
})
}
}
})
只需 运行 您的代码。正如其他指出的那样，重要的是 运行 console.log 对结果进行调试。根据您的情况，在成功函数
处添加了一个 console.log<!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>
它得到了这样的回应：
但那是一个字符串，不是一个对象。查看此日志：
console.log(typeof response) // result is string
因此您试图访问字符串而不是对象上的键，因此您需要将字符串解析为对象，例如：
JSON.parse(response)
原来是这样：
JSON.parse(response).features[0].properties.ele
这将使您的代码工作：
EDIT: 要访问其他数据，需要在函数定义你需要的对象的变量，在DOM上渲染。例如纬度：
<!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>
会给你：