JavaScript

Tadjiev Codes
Tadjiev Codes
8,508 Points

AJAX 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
Zimri Leijen
8,957 Points

I 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
Steven Parker
194,962 Points

The 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
Tadjiev Codes
8,508 Points

Thanks, Mr.Steven) Clear now

Tadjiev Codes
Tadjiev Codes
8,508 Points

Thanks 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