javascript - 将 $.each 和 $.getJSON 转换为 vanilla javascript

Question

我正在创建一个 Web 应用程序来从 GitHub API 收集详细信息并将它们显示在屏幕上。

我想将 $.getJSON 和 $.each 转换为原生 JavaScript。

我不想在我的代码中使用 jquery 的任何部分，因此可以使用 Ajax 或 vanilla JavaScript。

const execute = () => {
  let uname= document.getElementById('username').value;
  //api for the username
  let apiCall1 = `https://api.github.com/users/${uname}`;
  //api for repository
  let apicall2 = `https://api.github.com/users/${uname}/repos`;
  $.getJSON(apiCall1, (json) => {
    let fullname   = json.name;
    let username   = json.login;
    let aviurl     = json.avatar_url;
    let profileurl = json.html_url;
    let followersnum = json.followers;
    let followingnum = json.following;
    let reposnum     = json.public_repos;

    if(fullname == undefined) { 
      fullname = username; 
    }

    document.getElementById('view').style.display = 'block';
    document.getElementById('result').innerHTML = `
    <h1 class="text-center pt-2">USER DETAILS</h1>
    <div class="row p-3">
      <div class="col-md-3">
        <img class="profile mt-3" src=${aviurl} alt="porfile image">
      </div>
      <div class="col-md-9">
        <h3>FULL NAME: <span>${fullname}</span></h3>
        <h3>USER NAME: <span>${username}</span></h3>
        <h3>PROFILE URL: <a href="${profileurl}"><span>${profileurl}</span></a></h3>
        <h3>FOLLOWERS: <span>${followersnum}</span></h3>
        <h3>FOLLOWING: <span>${followingnum}</span></h3>
        <h3>NUMBER OF REPOSITORIES: <span>${reposnum}</span></h3>
      </div>
    </div>`; 

    let repositories, outhtml;
    $.getJSON(apicall2, function(json){
      repositories = json;   
      outputPageContent();                
    });          

    function outputPageContent() {
      if(repositories.length == 0) {
        outhtml = '<h1>No Repositories!</h1>'; 
      }
      else {
        outhtml = `<h1>LIST OF REPOSITORIES</h1><ul>`;
        $.each(repositories, function(index) {
          outhtml = outhtml + `<li><a href="${repositories[index].html_url}" target="_blank">${repositories[index].name}</a></li>`;
        });
        outhtml = outhtml + '</ul>'; 
      }
      document.getElementById('repo').innerHTML = outhtml;
    }
  })
  .fail(() => { 
    alert("No such username exists!");
    document.getElementById('username').value = "";
    document.getElementById('view').style.display = 'block';
    document.getElementById('result').innerHTML = "Not Available";
    document.getElementById('repo').innerHTML = "Not Available";
  });
};

我无法将代码转换为原生 JavaScript。

Answer 1

$.getJSON

$.getJSON('https://your.url.com', function(data) {

});

变成:

var request = new XMLHttpRequest();
request.open('GET', 'https://your.url.com', true);

request.onload = function() {
  if (this.status >= 200 && this.status < 400) {
    // Success!
    var data = JSON.parse(this.response);
  } else {
    // error
  }
};

request.send();

或

fetch('https://your.url.com')
   .then(response => response.json())
   .then(data => // do something with data now)
   .catch(() => // error)

$.每个

$.each(collection, (item) => console.log(item));

变成:

collection.forEach(item => console.log(item));

---

从 jQuery 迁移到 vanilla 的一个很好的资源是 http://youmightnotneedjquery.com/ .