CODEWITHSUNDEEP
javascripthtmljsonimage
J_W
J_W

Reputation: 47

API contains JSON data how to render on HTML and JavaScript?

I'm trying to have a bunch of memes show up on my HTML page. I'm using this URL https://api.memegen.link/images. I'm having lots of trouble trying to display images. I cannot figure out how to use this link. The link has what looks like a bunch of JSON code and the actual website has very little documentation on how to use it.

Here's the Javascript code. The HTML is just 2 divs and an input that has an onClick that call the function

$(document).ready(function imagesFromJSON() {

$.getJSON("https://api.memegen.link/images", function (data) {

    var arrItems = [];      // The array to store JSON items.
    $.each(data, function (index, value) {
        arrItems.push(value);       // Push values in the array.
    });

    // Extract values for the table header.
    var col = [];
    for (var i = 0; i < arrItems.length; i++) {
        for (var key in arrItems[i]) {
            if (col.indexOf(key) === -1) {
                col.push(key);
            }
        }
    }


    var table = document.createElement("table");

    var tr = table.insertRow(-1);                   // Table row.

    for (var i = 0; i < col.length; i++) {
        var th = document.createElement("th");      // Table header.
        th.innerHTML = col[i];
        tr.appendChild(th);
    }

    // Add JSON data to the table as rows.
    for (var i = 0; i < arrItems.length; i++) {
        tr = table.insertRow(-1);

        for (var j = 0; j < col.length; j++) {
            var tabCell = tr.insertCell(-1);
            if (j === 2) {      // The last JSON column has image urls.

                // Create an <img> element to show the images.
                var img = document.createElement('img');        
                img.src = arrItems[i].Image;   // The image source from JSON array.
                tabCell.appendChild(img);
            }
            else
                tabCell.innerHTML = arrItems[i][col[j]];
        }
    }

    // Finally, add the newly created <table> with data to a container.
    var divContainer = document.getElementById("showData");
    divContainer.innerHTML = "";
    divContainer.appendChild(table);
  });
 });

Upvotes: 0

Views: 97

Answers (1)

Not A Robot
Not A Robot

Reputation: 2684

You can use fetch API in JavaScript directly to call the memeAPI.

For generating the table inside your JavaScript, you can use Template literals which will make it easy for you to construct the tables.

const getMemeBtn = document.querySelector("#get-meme");

getMemeBtn.addEventListener("click", getMeme);


function getMeme(){
  fetch("https://api.memegen.link/images")
  .then(res => res.json())
  .then(data => {
     
     let HTMLContent = `<table>
                         <tr>
                           <th>Meme Template</th>
                           <th>Meme Image</th>
                         </tr>
     `;
     for(let i = 0; i < 5; i++){
       let memeImgURL = data[i].url;
       let memeName = data[i].template;
       
       HTMLContent += `
       <tr>
         <td>${memeName}</td>
         <td><img width="100" height="100" src="${memeImgURL}"></td>
         </tr>
       `;
     }
     HTMLContent += `</table>`;
     
     document.getElementById("memes").innerHTML = HTMLContent;
     
  
  })
  .catch(err => console.log(err));
}
<button type="button" id="get-meme">Get Meme</button>

<br><br><br><br>

<div id="memes"></div>

Upvotes: 3

Related Questions