Welcome to the Treehouse Community
Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.
Looking to learn something new?
Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.
Start your free trialTadjiev Codes
9,626 PointsAJAX JSON FILE
Dear Folks and Mr.Steven, If you could pls take a look at my code for a moment to see what's wrong with it. I researched about JSON from the book of Jon Ducket and he says that
/*JSONP (sometimes written
JSON-P) involves adding a
<script> element into the page,
which loads the JSON data
from another server. This works
because there are no rest rictions
on the source of script in a
<script> element.
The script contains a call to
a function, and the JSONformatted
data is provided as an
argument to that function. The
function that is called is defined
in the page that requests the
data, and is used to process and
display the data. See next page*/
1. A function that will process the JSON data that the
server sends. In the example on the next page, the
function is ca lled showEvents () .
2. A <script> element whose src attribute will
request the JSON data from the remote server.
<script>
function showEvents(data)
// Code to process data and
// display it in t he page here
</ script>
<script sr c="http: //example.or g/jsonp">
</ script>
I tried to do like he says, to add my JS code inside a script in HTML and script src for thee URL. But still it shows only the name and the productid and can't display the image. OR is that a CSS problem? I guess it might be sth connected with JS. And even when it was in external JS file. It was working the same way. So I"m a bit confused with what the book says and with the issue that I'm having.
The workspace: https://w.trhou.se/93y6mpn2xk
It would be great if you could review it whenever you have a little free time Mr.Steven
Actually Mr.Zimri helped me yesterday to identify some issues but the image thing is a bit weird(
I finished the AJAX basics course and started Asynchronous Programming with JavaScript Guil's course to understand AJAX and Asynchronous terms better. Thanks a lot)
3 Answers
Zimri Leijen
11,835 PointsI replied in the other thread. The issue in the snapshot you shared there was that you change the src of a div, it works fi you make the div an img instead.
Note that the API provides a lot of dead links, so not ALL images will work, but about 30% to 40% of them does.
Steven Parker
231,275 PointsThe API cannot be loaded as a script as on lines 124-125 because it returns JSON data and not JavaScript code. The request also fails because no API key is provided.
But the AJAX call works, and the problem with the image is that "src" attribute of the element with id "beerName" is being updated with the image URL, but that element is a div instead of an img.
Once that's fixed, it will display images for some items but not all. That's the API's fault, not every URL it provides leads to an image. You may want to notify the provider's customer service staff.
Tadjiev Codes
9,626 PointsThanks, Mr.Steven) Clear now
Tadjiev Codes
9,626 PointsThanks a lot. Just because of the div tag it was not working damn( Such a stupid mistake. I thought div can contain the image but yeah as per HTML it should be in an image tag