Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 3 of 3
  1. #1
    New to the CF scene
    Join Date
    Mar 2014
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Lightbulb Read external JSON file with AJAX does not work

    Hi,
    I'm trying to read an external JSON file via AJAX and then display the content with JavaScript. If I import a text file then it works, but the JSON file does not read. I've attached the html and JSON file for reference. Any ideas what's going wrong here?

    Thanks in advance,
    Shamil.
    Attached Files Attached Files

  • #2
    Senior Coder Arbitrator's Avatar
    Join Date
    Mar 2006
    Location
    Splendora, Texas, United States of America
    Posts
    3,302
    Thanks
    28
    Thanked 276 Times in 270 Posts
    Quote Originally Posted by shamil.v29 View Post
    IAny ideas what's going wrong here?
    For one, you have a syntax error in your JSON file. JSON syntax is more restrictive than general JavaScript syntax in that it doesn't allow trailing commas in objects. So, the comma after {"city":"03", "num":"456"} needs to be removed.

    Second, you're attempting to parse the data argument as if it were a JSON string; you can work with the argument directly since it's already an object.

    Last, is that AJAX triggers off a readystatechange event which is occurring after your last four lines of code have been executed. (This isn't at all apparent because you're using jQuery instead of vanilla JavaScript.) Put all of your event-dependent code (i.e., the last four lines) within the success function; this will cause your code to be executed in the expected order.

    Here's a vanilla version of your code that uses correct HTML and drops the jQuery:

    Code:
    <!doctype html>
    <html>
    	<head>
    		<meta charset="utf-8">
    		<title>Demo</title>
    		<style>
    			[hidden] { display: none; } /* IE9–10 support fix. */
    			th::after { content: ":"; }
    		</style>
    	</head>
    	<body>
    		<h1 id="title" hidden>Title Placeholder</h1>
    		<table id="jtable" hidden>
    			<tr>
    				<th>Name</th>
    				<td id="jname"></td>
    			</tr>
    			<tr>
    				<th>Age</th>
    				<td id="jage"></td>
    			</tr>
    			<tr>
    				<th>Address</th>
    				<td id="jstreet"></td>
    			</tr>
    			<tr>
    				<th>Phone</th>
    				<td id="jphone"></td>
    			</tr>
    		</table>
    		<script>
    			(function () {
    				"use strict";
    				function checkRequestReadiness(handler) {
    					var request = this;
    					if (request.readyState === XMLHttpRequest.DONE && request.statusText === "OK") {
    						handler(request);
    					}
    				}
    				function makeRequest(method, URL, handler) {
    					var request = new XMLHttpRequest();
    					request.open(method, URL);
    					request.addEventListener("readystatechange", checkRequestReadiness.bind(request, handler));
    					request.send();
    				}
    				function addTitle(request) {
    					var heading = document.getElementById("title");
    					heading.textContent = request.responseText;
    					heading.removeAttribute("hidden");
    				}
    				function addPersonalInfo(request) {
    					var addressBook = JSON.parse(request.responseText);
    					document.getElementById("jname").textContent = addressBook.name;
    					document.getElementById("jage").textContent = addressBook.age;
    					document.getElementById("jstreet").textContent = addressBook.address.streetname;
    					document.getElementById("jphone").textContent = addressBook.phone[0].city + " " + addressBook.phone[0].num;
    					document.getElementById("jtable").removeAttribute("hidden");
    				}
    				makeRequest("get", "title.txt", addTitle);
    				makeRequest("get", "addressbook.json", addPersonalInfo);
    			})();
    		</script>
    	</body>
    </html>
    For every complex problem, there is an answer that is clear, simple, and wrong.

  • #3
    New to the CF scene
    Join Date
    Mar 2014
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Awesome dude!!! That works. Thanks heaps!


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •