如何在 Javascript 中加载远程数据然后处理它？

问题描述

我是一名开发原型的新手。我发现了 this sample on Codepen for Swipeable Stacked Cards，我正在尝试对其进行自定义以加载远程 JSON 数据。

Codepen 有一个名为 stackedCards() 的 700 多行 JS 函数，它使用 document.addEventListener("DOMContentLoaded") 运行，我不完全理解（TBH）。我查找了 MDN page on DOMContentLoaded，但它没有解释我遗漏了什么。

我知道 JS 是非阻塞的，所以我尝试使用不同的技术，但没有任何效果：

顺序函数调用
嵌套函数调用：在 fetch() 调用中调用 stackedCards() 函数 onSuccess
异步/等待函数

这是最新的尝试：

const addItemCard = (item) => {
  var itemList = document.getElementById("content");
  //itemList.innerText = "TEST"
  console.log("Radar 4: " + item.title);
  
  var itemCard = '' +
    '        <div class="card">' +
    '          <div class="card-content">' +
    '            <div class="card-image">' +
    '              <img src="' + 'https://via.placeholder.com/100' + '" width="100%" height="100%"/>' +
    '            </div>' +
    '            <div class="card-titles">' +
    '              <h3>' + /* item.title */ 'Super Title' + '</h3>' +
    '              <h3>10 Destinations</h3>' +
    '            </div>' +
    '          </div>' +  
    '        </div>';
  itemList.innerHTML += itemCard;
}

const displayData = async () => {
  let sourceDataUrl = [JSON_URL];

  fetch(sourceDataUrl)
    .then((response) => response.json())
    .then((data) => {
      console.log("Fetch response.json = " + JSON.stringify(data)); //OK PASS
      data.forEach(item => addItemCard(item));
    })
    .catch((error) => {
      console.error(error);
    });

JSFiddle here。

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）

javascript json nonblocking