I have a scenario whereby I am needing to display some fairly simple data (using JQUERY) from an external web app my client is providing that serves up well formatted json (validated using jsonlint.com). this is my first time using json and when I use dataType jsonp and the LIVE url I get an ‘invalid label’ error on the first quote in the beginning of the name:value pairs in the JSON data… but when I copy that same json and save it locally and change jsonp to just json, it works and I can manipulate the data any way I want in the DOM and accomplish what Im after.
what do I need to do to get the live URL json to work?
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>JSON Test</title>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js" type="text/javascript"></script>
<script>
$.ajax({
type : 'GET',
//url : 'jsondata2.js',
url: 'http://.....' //MY LIVE URL HERE. NOTE, THE LOCAL FILE ABOVE THAT DOES WORK (JSON NOT JSONP) IS JUST A COPY/PASTE OF THE DATA THAT THIS URL DISPLAYS IN BROWSER. ,
dataType : 'jsonp',
success : function(jsonData) {
alert(jsonData.PropertyName);
},
error : function() {
alert('Error loading the JSON data');
}
});
</script>
</head>
<body></body>
</html>
Heres the json data:
{
"PropertyID": 1468,
"PropertyName": "AG Test One",
"Listing Information": {
"Availability": "Not Specified",
"Pricing Information": "For Sale, Price: 1.00 (Set Price per Acre)"
},
"Location": {
"City": "ZZ",
"County": "ZZ Test County",
"Municipality": "Within City Limits",
"State": "SC",
"Tax Map ID": "123-123-123",
"ZipCode": "22222"
},
"Physical Details": {
"Certified Property": false,
"Minimum Divisible Acreage": 0,
"Site Comments": null,
"Site Improvements": "Forested",
"Surrounding Land Use": [
"North: Airport / Port / Intermodal Facility",
"South: Waterway (River / Lake)",
"East: Utility (Easements / Substations)",
"West: Correctional Facility"
],
"Total Site Size": 500,
"Zoning": null
},
"Transportation": {
"Barge Access": false,
"Name of Rail Carrier Providing Service": "None specified",
"Nearest Commercial Airport": "None Specified",
"Nearest Interstate": "None Specified",
"Nearest Sea Port": "None Specified",
"Railway Access": false,
"Runway Access": false
},
"Utilities": {
"Diameter of Waste Water Main": 0,
"Diameter of Water Main": 0,
"Distance To Electric Provider": 1,
"Distance to Natural Gas Provider": 0,
"Distance to Sewer Service": 0,
"Distance to Water Service": 0,
"Electric Provider": "Undetermined",
"Fire Insurance Rating": "1",
"Natural Gas Provider": null,
"Telecommunications Providers": null,
"Type of Sewer": "",
"Water Service Provider": "Undetermined",
"Water Water Service Provider": "Undetermined"
}
}
I also tried getJSON method… and get same reults in both local and external url scenarios:
$(document).ready(function() {
$.getJSON('jsondata2.js', function(data) {
//$.getJSON('SAME LIVE URL HERE....', function(data) {
var output = "<ul>";
output += "<li>" + data.PropertyName + "</li>";
output += "</ul>";
document.getElementById("placeholder").innerHTML = output;
});
});
For JSONP your server needs to output
and not just the JSON string! jQuery will automatically execute this Javascript code using the success callback of $.ajax()