title: Display data in tabs from an API using JSON and AJAX
body: <p>Currently working on a site which needs to return data from the guardian API and display it on my own site in the tabs I have created.</p>
  
  <p>What I am unsure about is how I can get the right information for each tab to display. So for example I have a 'Home' tab, a 'Politics' tab, 'Sports' tab and so on. </p>
  
  <p>Here is an example of my html</p>
  
  <pre><code>&lt;div class="page-header"&gt;
  &lt;h1&gt;News Updates&lt;/h1&gt;
  
  &lt;/div&gt;
  
  &lt;div class="container"&gt;
   &lt;h3&gt;Welcome&lt;/h3&gt;
  
   &lt;div class+"row"&gt;
  
   &lt;div class"col-lg-3 col-md-3 col-sm-6 col-xs-12"&gt;
    &lt;div class="tab"&gt;
    &lt;button class="tablinks" onclick="openEvent(event, 'Home')"&gt;Home&lt;/button&gt;
    &lt;button class="tablinks" onclick="openEvent(event, 'Politics')"&gt;Politics&lt;/button&gt;
    &lt;button class="tablinks" onclick="openEvent(event, 'World')"&gt;World&lt;/button&gt;
    &lt;button class="tablinks" onclick="openEvent(event, 'Technology')"&gt;Technology&lt;/button&gt;
    &lt;button class="tablinks" onclick="openEvent(event, 'Science')"&gt;Science&lt;/button&gt;
    &lt;button class="tablinks" onclick="openEvent(event, 'Entertainment')"&gt;Entertainment&lt;/button&gt;
    &lt;button class="tablinks" onclick="openEvent(event, 'Sport')"&gt;Sport&lt;/button&gt;
    &lt;button class="tablinks" onclick="openEvent(event, 'Most Popular')"&gt;Most Popular&lt;/button&gt;
   &lt;/div&gt;
  
  
  
   &lt;div id="Home" class="tabcontent"&gt;
   &lt;h3&gt;News Home&lt;/h3&gt;
  
  
   &lt;/div&gt;
  </code></pre>
  
  <p>The API link is: <a href="https://content.guardianapis.com/search?api-key=42fe68de-c20c-400e-ba2e-52bf467b10bf" rel="nofollow noreferrer">https://content.guardianapis.com/search?api-key=42fe68de-c20c-400e-ba2e-52bf467b10bf</a></p>
  
  <p>After trying a few ways to get the data, I have still not got it to display on my site. </p>
  
  <p>Would anyone be able to help me with how I can use AJAX to take the information from the JSON file and put it into each of my tabs. Each request to the api will be different as they are obviously different topics. </p>
  
  <p>Once I am retrieving the correct data from the API how can I get it to display in the correct tabs?</p>
  
  <p>EDIT: Adding the 2 ways I tried to get the data from the url</p>
  
  <pre><code> &lt;script&gt;
   $(function(){
  
   $("button").click(function(){
      $.getJSON("http://content.guardianapis.com/search?q=politics&amp;api-key=42fe68de-c20c-400e-ba2e-52bf467b10bf", function(result){
  
          $.each(result, function(i, field) {
              $("#resultJson").append(field.name);
          });
      });
   });
   });       
  &lt;/script&gt;
  </code></pre>
  
  <p>and</p>
  
  <pre><code>var homeBtn = document.getElementById("Home");
  
   homeBtn.addEventListener("click", function(){
      var politicsRequest = new XMLHttpRequest();
  politicsRequest.open('GET', 'http://content.guardianapis.com/search?q=politics&amp;api-key=42fe68de-c20c-400e-ba2e-52bf467b10bf');
  politicsRequest.onload = function(){
    var politicsData = JSON.parse(politicsRequest.responseText);
  console.log(politicsData.responseText);
  };
  ourRequest.send();
    });
  </code></pre>
  
  <p>So for the politics tab I am looking to search for articles with politics, then taking the say headline and another bit of data from the JSON to display within the tab section allocated to that topic</p>