I am just trying to fetch an API data and display the same using the JavaScript Code.. as here.. I am not receiving any Output, The Output is Completely Blank as of Now .. Can you Please check if I have defined any Variable Wrongly.

The API links as here: http://vmaffluence.in/wp-json/wp/v2/posts/?category=website,

'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();
});
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);
      }
    }
  }
}
<h1>Checking API Codes</h1>
<ul id="authors"></ul>

upvote
  flag
data is an array not an object with a property results – charlietfl

1 Answers 11

I was able to get it going using jQuery. If you are not using jQuery, you will need to look up how to create the li and span blocks programatically.

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

If you want to use jQuery, you can download the framework from their site and include it via

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

It may be more that you are looking for and you can lookup another way to replace the $(...) lines. I don't know how to do it without jQuery, because I use jQuery. You don't have to. You may be able to do something like (don't know):

x.innerHtml = "<li><span>" + website.id + "</span></li>";
upvote
  flag
Hi, Thanks .. Can you Please help me in sending the complete code .. As still I am not able to get the desired result in the HTML Front end.. Request you to share the complete HTML Coding ..with the Jquery Code.. – Vasanthamugi T VM AFFLUENCE
upvote
  flag
i edited the answer regarding jQuery – Abdul Ahad

Not the answer you're looking for? Browse other questions tagged or ask your own question.