Question

我只是想获取一个API数据，并使用JavaScript代码显示相同的...就像这里..我没有收到任何输出，输出完全空白截至现在..你能检查我是否有错误地定义了任何变量。

API链接如下：http://vmaffluence.in/wp-json/wp/v2/posts/?category=website，

＆＃13;

'use strict';

function createNode(element) {
  return document.createElement(element);
}

function append(parent, el) {
  return parent.appendChild(el);
}

var ul = document.getElementById('authors');
var url = 'http://vmaffluence.in/wp-json/wp/v2/posts/?category=website';
fetch(url).then(function(resp) {
  return resp.json();
}).then(function(data) {
  var authors = data.results;
  return authors.map(function(website) {
    span.innerHTML = website.id;
    append(li, span);
    append(ul, li);
  });
})['catch'](function(error) {
  console.log();
});

＆＃13;

body {
  background: green;
  h1 {
    text-align: center;
    font-family: arial;
    color: #5a5a5a;
  }
  li {
    display: block;
    list-style: none;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: center;
    flex-basis: 100%;
    li {
      flex-basis: 40%;
      display: flex;
      flex-direction: column;
      margin-bottom: 20px;
      align-items: center;
      span {
        font-family: arial;
        font-size: 20px;
        color: #5a5a5a;
        text-align: center;
      }
      img {
        margin: 10px;
        border-radius: 10px;
        box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.2);
      }
    }
  }
}

＆＃13;

<h1>Checking API Codes</h1>
<ul id="authors"></ul>

＆＃13;

Answer 1

我能够使用jQuery实现它。如果您不使用jQuery，则需要查找如何以编程方式创建li和span块。

var ul = $("#authors");

var url = 'http://vmaffluence.in/wp-json/wp/v2/posts/?category=website';

fetch(url).then(function(resp) {
    return resp.json();
}).then(function(data) {
    return data.map(function(website) {
        console.log('INFO - adding website id: [' + website.id + ']');

        var li = $("<li>");
        var span = $("<span>").html(website.id);

        li.append(span);
        ul.append(li);          
    });
})['catch'](function(error) {
    console.log('ERROR - ' + error);
});

如果您想使用jQuery，可以从他们的网站下载框架并通过

包含它

<script src="..." type="text/javascript"></script>

可能更多的是你正在寻找，你可以查找另一种方式来替换$（...）行。我不知道如何在没有jQuery的情况下做到这一点，因为我使用jQuery。你没有必要。你可以做一些事情（不知道）：

x.innerHtml = "<li><span>" + website.id + "</span></li>";

JAVASCRIPT - FETCH API不显示输出

1 个答案: