title: Getting images from API using ajax
body: <p>I am getting no errors in my console but all I wanted to get is the thumbnail_url which is a json in the php file. In the console it is showing that it is an array string how can I possibly access it?</p>
  
  <p><strong>EDITS:</strong>
   I was able to execute my desired output but the problem is that the last object was the only one being outputted in the browser.</p>
  
  <pre><code>&lt;?php 
  //Set API user and password
  $API_USER = 'username';
  $API_PASS = 'password';
  //Set parameters to make cURL call to Duda
  $ch = curl_init();
  curl_setopt($ch, CURLOPT_FOLLOWLOCATION, true);
  curl_setopt($ch, CURLOPT_URL, 'sampleurl');
  curl_setopt($ch, CURLOPT_RETURNTRANSFER, true);
  curl_setopt($ch, CURLOPT_USERPWD, $API_USER.':'.$API_PASS);
  curl_setopt($ch, CURLOPT_HTTPAUTH, CURLAUTH_BASIC);
  curl_setopt($ch, CURLOPT_TIMEOUT, 10);
  curl_setopt($ch, CURLOPT_HTTPHEADER, array('Content-Type: application/json'));
  curl_setopt($ch, CURLOPT_CUSTOMREQUEST, "GET");
  //execute cURL call and get template data
  $output = curl_exec($ch);
  //check for errors in cURL
  if(curl_errno($ch)) {
      die('Curl error: ' . curl_error($ch));
  }
  //echo $output;
  print_r($output);
  ?&gt;
  </code></pre>
  
  <p>here is our html and ajax request:</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
  &lt;head&gt;
  &lt;meta charset="utf-8"&gt;
  &lt;meta name="viewport" content="width=device-width"&gt;
  &lt;title&gt;Ajax Preview&lt;/title&gt;
  &lt;script src="https://code.jquery.com/jquery-3.1.0.js"&gt;&lt;/script&gt;
  
  &lt;script&gt;
  
  
    $(function() {
     var $data = $('#content');
     $.ajax({
       method:'GET',
       dataType:'json',
       url:'https://syncslider-ehnoxx07.c9users.io/temp.json',
       success: function (data) {
          $.each(data, function(i,data){
            $data.html('&lt;img src=' + data.thumbnail_url + '&gt;');
        });
      }
    });
  });    
      &lt;/script&gt;
  &lt;/head&gt;
  &lt;body&gt;
  &lt;div id="content"&gt;&lt;/div&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>