使用 oEmbed 和 Javascript 嵌入多个视频答案

【问题标题】：Embedding multiple videos using oEmbed and Javascript使用 oEmbed 和 Javascript 嵌入多个视频
【发布时间】：2020-09-18 14:42:28
【问题描述】：

我正在尝试使用 Vimeo 的 oEmbed 将多个视频嵌入到网页中。这个想法是简单地在 CMS 中输入 url，它将为每个包含以下代码的项目生成一个 div。

这个 javascript 正在做我想做的事，但只适用于第一项。当我检查控制台时，只有一个响应包含第一个项目/视频的 JSON 元数据。

这可能不是最好的方法，但可以完成工作，我所需要的只是让它适用于多个项目。有什么想法我该怎么做？

谢谢

    <div class="vimeo-video" id="[[+ID]]-video"></div>
    <div class="vimeo-info" id="[[+ID]]-info"></div>
    <script>
        const getJSON = async url => {
            try {
                const response = await fetch(url);
                if (!response.ok) // check if response worked (no 404 errors etc...)
                    throw new Error(response.statusText);

                const data = await response.json(); // get JSON from the response
                return data; // returns a promise, which resolves to this data value
            } catch (error) {
                return error;
            }
        }
        console.log("Fetching data...");
        getJSON("https://vimeo.com/api/oembed.json?url=[[+myVideoURL]]").then(data => {
            document.getElementById("[[+ID]]-video").innerHTML = data.html;
            document.getElementById("[[+ID]]-info").innerHTML = '<h2><a href="[[+myVideoURL]]" target="_blank">' + data.title + '</a></h2>' + data.description;
            console.log(data);
        }).catch(error => {
            console.error(error);
        });
    </script>

【问题讨论】：

标签： javascript json oembed

【解决方案1】：

如果像我这样具有基本 javascript 技能的人会遇到类似的情况。问题是菜鸟的错误，我不得不使用var而不是const。

原因是var 变量可以更新和重新声明，而 const 变量既不能更新也不能重新声明。所以这是工作代码：

var getJSON = async (url) => {
  try {
    var response = await fetch(url);
    if (!response.ok)
      // check if response worked (no 404 errors etc...)
      throw new Error(response.statusText);

    var data = await response.json(); // get JSON from the response
    return data; // returns a promise, which resolves to this data value
  } catch (error) {
    return error;
  }
};

【讨论】：