How can we store images in JSON?

Question

index.html:

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Ajax</title>
</head>
<body>
    <h2>jQuery AJAX (open in Firefox)</h2>
    <h3> Get partial page content using:</h3>
       <button id="btnAjax" > .ajax() REST</button>
    <button id="btnLoadText">.load() Text File</button>
    <h2> Result</h2>
    <div id="showResult"></div>
     <div> <img id="i1"> </div>     
<hr>
<a href="https://oscarotero.com/jquery/">jQuery Quick API Reference at https://oscarotero.com/jquery/</a>
    <script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
    <script src="ajax.js"></script>
</body>
</html>

ajax.js:

$('#btnLoadText').click(function () { $("#showResult").load("show.txt"); });
  $('#btnAjax').click(function () { callRestAPI() });

  // Perform an asynchronous HTTP (Ajax) API request.
  function callRestAPI() {
    var root = 'https://jsonplaceholder.typicode.com';
    $.ajax({
      url: root + '/photos/6',
      method: 'GET'
    }).then(function (response) {
      console.log(response);
      $('#i1').attr("src", response.url);
      $('#showResult').html(response.body);
    });
  }
})(jQuery);

I have tried using the id of a div tag. But I didn't get the image displayed. Can someone tell me another way to load the image without using image tag?

you need to be explicit about your question, ATM you have to different questions.... — Ousmane D., Mar 06 '17 at 01:02

score 0 · Answer 1 · answered Mar 06 '17 at 01:02

Does response.url contain the correct URL of your image? Try logging the response.url to see if you're getting the desired URL.

If not, the URL may be contained in the response.body (I'm not sure if you're getting a JSON response, so it would be helpful to post the ajax response for a more accurate answer).

jagdish.narkar · Answer 2 · 2017-03-06T02:05:49.007

I removed my earlier answer/comment about something wrong with request URL: I just tested your code on my local project with following function:

function callRestAPI() {
var root = 'https://jsonplaceholder.typicode.com';
$.ajax({
    url: root + '/photos/6',
    method: 'GET',
    success: function (data) {
        console.log(data);
        $('#i1').attr("src", data.url);
    }
});
}

I used "jquery-1.10.2.js", try that and let me know.

score 0 · Answer 3 · answered Mar 06 '17 at 01:42

The reason you aren't getting any update is because you aren't waiting for the elements to be registered.

If you put the two click setters into a $(document).ready(function(){//your setters here}); call, it should fix your problem.

You should also load your jquery in your head, by convention we load scripts and linked resources in the head element.

Here is what it looks like:

//wait for the document to existts before assigning the jquery.
$(document).ready(function () {

 $('#btnLoadText').click(function () { $("#showResult").load("show.txt"); });
 $('#btnAjax').click(callRestAPI);

});

// Perform an asynchronous HTTP (Ajax) API request.
function callRestAPI() {
 console.log("yolo");
 var root = 'https://jsonplaceholder.typicode.com';
 $.ajax({
  url: root + '/photos/6',
  method: 'GET'
 }).then(function (response) {
  console.log(response);
  $('#i1').attr("src", response.url);
  $('#showResult').html(response.body);
 });
}

<!DOCTYPE html>
<html lang="en">
  <head>
    <title>Ajax</title>
    <script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
  </head>
  <body>
  
    <h2>jQuery AJAX (open in Firefox)</h2>
    <h3> Get partial page content using:</h3>
    
    <button id="btnAjax"> .ajax() REST</button>
    <button id="btnLoadText">.load() Text File</button>
    
    <h2> Result</h2>
    <div id="showResult"></div>
    
    <div>
      <img id="i1">
    </div>
    
    <hr>
    
    <a href="https://oscarotero.com/jquery/">jQuery Quick API Reference at https://oscarotero.com/jquery/</a>
  </body>
</html>

That's interesting, but I think I'll keep using document ready. On Another note, any idea why people keep putting linked/remote scripts outside of the head tag? I've never seen any convention that didn't require them to be in the head tag. — Guillaume Mercier, Mar 06 '17 at 08:30
when scripts arent immediately necessary or when you have many scripts putting them in the head will cause the page to load slower because it reads from top to bottom and the page will only load once all scripts in the head are done. — Jonathan Portorreal, Mar 06 '17 at 08:50
Well, I never considered that, thanks for the enlightenment. — Guillaume Mercier, Mar 06 '17 at 10:47

score 0 · Answer 4 · answered Mar 06 '17 at 04:53

I'm not sure if this is the image you're trying to load, but from the code you have given us there is a small typo, you have an additional snippet })(jQuery); at the end of the js. Heres the same code with it removed and a generic image logo appears just fine:

$('#btnLoadText').click(function() {
  $("#showResult").load("show.txt");
});
$('#btnAjax').click(function() {
  callRestAPI()
});

// Perform an asynchronous HTTP (Ajax) API request.
function callRestAPI() {
  var root = 'https://jsonplaceholder.typicode.com';
  $.ajax({
    url: root + '/photos/6',
    method: 'GET'
  }).then(function(response) {
    console.log(response);
    $('#i1').attr("src", response.url);
    $('#showResult').html(response.body);
  });
}

<!DOCTYPE html>
<html lang="en">

<head>
  <title>Ajax</title>
</head>

<body>
  <h2>jQuery AJAX (open in Firefox)</h2>
  <h3> Get partial page content using:</h3>
  <button id="btnAjax"> .ajax() REST</button>
  <button id="btnLoadText">.load() Text File</button>
  <h2> Result</h2>
  <div id="showResult"></div>
  <div> <img id="i1"> </div>
  <hr>
  <a href="https://oscarotero.com/jquery/">jQuery Quick API Reference at https://oscarotero.com/jquery/</a>
  <script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>

  <script src="ajax.js"></script>
</body>

</html>

And everything looks fine to me?

How can we store images in JSON?

4 Answers4