如何从JSON取元素并按需写入？Vimeo视频批量处理方案

我来帮你搞定这两个前端技术问题，一步步来：

核心是异步数据处理+DOM操作，分两种场景给你说明：

场景1：JSON通过网络请求获取（比如fetch） #

fetch是异步操作，必须在回调里处理返回的JSON，不能在请求外直接访问数据。比如：

// 示例：从目标接口拉取JSON
fetch('你的接口地址')
  .then(res => {
    if (!res.ok) throw new Error('请求失败'); // 先判断请求是否成功
    return res.json(); // 解析成JSON对象
  })
  .then(jsonData => {
    // 这里写你的条件判断逻辑，比如检查某个字段值
    if (jsonData.status === 'success' && jsonData.targetField === '指定条件') {
      // 不要用document.write（页面加载后用会覆盖整个页面），推荐用DOM操作
      const contentDiv = document.createElement('div');
      contentDiv.innerHTML = `符合条件的内容：${jsonData.result.content}`;
      document.body.appendChild(contentDiv); // 添加到页面末尾
    }
  })
  .catch(err => console.error('处理过程出错：', err));

场景2：已有现成的JSON变量 #

如果控制台里已经拿到了json变量，直接判断条件后操作DOM即可：

// 假设控制台中已存在json变量
if (json.author === '目标作者' && json.status === 200) {
  const pTag = document.createElement('p');
  pTag.textContent = `提取到的内容：${json.description}`;
  document.body.appendChild(pTag);
}

先说说你原代码的几个问题：

1. 异步请求的闭包陷阱：循环里的i会因为异步执行最后都变成最大值，导致所有请求都用同一个ID
2. 条件判断错误：你写的if (json.element == "200")完全不符合需求，应该检查author字段
3. document.write的风险：页面加载完成后用document.write会覆盖整个页面，非常不推荐
4. 没有错误处理：万一某个视频ID不存在，会直接中断整个流程

下面是修正后的完整代码，用async/await让逻辑更清晰（也可以用.then写法）：

// 替换成你要匹配的作者名称
const targetAuthor = "指定作者名称";
// 视频ID范围
const startId = 330463512;
const endId = 330463515;

// 封装成异步函数，处理循环内的异步请求
async function fetchAndInsertVimeoVideos() {
  for (let i = startId; i <= endId; i++) {
    try {
      const res = await fetch(`https://vimeo.com/api/oembed.json?url=https://player.vimeo.com/video/${i}`);
      if (!res.ok) {
        console.log(`视频ID ${i} 请求失败，状态码：${res.status}`);
        continue; // 跳过无效的视频ID
      }
      const videoData = await res.json();
      // 判断作者是否匹配
      if (videoData.author_name === targetAuthor) {
        // 创建iframe元素
        const iframe = document.createElement('iframe');
        iframe.src = `https://player.vimeo.com/video/${i}`;
        iframe.width = "640";
        iframe.height = "360"; // 用16:9的比例更符合视频规范
        iframe.frameBorder = "0";
        iframe.allowFullscreen = true;
        // 添加到页面（可以改成你想要的容器，比如document.getElementById('video-container')）
        document.body.appendChild(iframe);
        // 加个换行，让视频不挤在一起
        document.body.appendChild(document.createElement('br'));
      } else {
        console.log(`视频ID ${i} 作者不匹配，跳过`);
      }
    } catch (err) {
      console.error(`处理视频ID ${i} 时出错：`, err);
    }
  }
}

// 调用函数执行
fetchAndInsertVimeoVideos();

代码说明： #

• 用let i在循环内声明，确保每个异步请求都能拿到正确的当前ID
• 用try/catch捕获错误，避免一个请求失败导致整个循环终止
• 检查res.ok判断请求是否成功，跳过不存在的视频ID
• 用document.createElement和appendChild插入元素，不会覆盖页面
• 调整视频比例为16:9，更符合Vimeo视频的默认展示效果

你可以把这段代码复制到浏览器控制台，替换targetAuthor为你要匹配的作者名称，直接运行就能看到效果啦！

内容的提问来源于stack exchange，提问作者sherlok222