使用oEmbed和Javascript嵌入多个视频

我正在尝试使用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>

const getJSON=异步url=>{
试一试{
const response=等待获取（url）；
if（！response.ok）//检查响应是否有效（无404错误等）
抛出新错误（response.statusText）；
const data=await response.json（）；//从响应中获取json
return data；//返回一个承诺，该承诺解析为此数据值
}捕获（错误）{
返回误差；
}
}
log（“获取数据…”）；
getJSON（“https://vimeo.com/api/oembed.json?url=[[+myVideoURL]]”。然后（数据=>{
document.getElementById（“[[+ID]]-video”）.innerHTML=data.html；
document.getElementById（“[[+ID]]-info”）.innerHTML=''+data.description；
控制台日志（数据）；
}).catch（错误=>{
控制台错误（error）；
});

以防像我这样拥有基本javascript技能的人也经历类似的事情。问题是一个新手的错误，我不得不使用

var

而不是

const

原因是

var

变量可以更新和重新声明，但常量变量既不能更新也不能重新声明。下面是工作代码：

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

---

以防像我这样有基本javascript技能的人也经历过类似的事情。问题是一个新手的错误，我不得不使用

var

而不是

const

原因是

var

变量可以更新和重新声明，但常量变量既不能更新也不能重新声明。下面是工作代码：

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