API 包含 JSON 数据如何在 HTML 和 JavaScript 上呈现？答案

【问题标题】：API contains JSON data how to render on HTML and JavaScript?API 包含 JSON 数据如何在 HTML 和 JavaScript 上呈现？
【发布时间】：2021-03-03 14:58:48
【问题描述】：

我正在尝试在我的 HTML 页面上显示一堆模因。我正在使用这个 URL https://api.memegen.link/images。我在尝试显示图像时遇到了很多麻烦。我不知道如何使用这个链接。该链接看起来像是一堆 JSON 代码，而实际网站上几乎没有关于如何使用它的文档。

这是 Javascript 代码。 HTML 只是 2 个 div 和一个具有调用函数的 onClick 的输入

$(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);
  });
 });

【问题讨论】：

将 api 响应保存在 state 中并使用它。

标签： javascript html json image

【解决方案1】：

您可以直接在 JavaScript 中使用fetch API 来调用 memeAPI。

要在 JavaScript 中生成 table，您可以使用 Template literals，这将使您可以轻松构建表格。

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>

【讨论】：