如何从API返回数据中提取rooms的name数组并调用使用

嘿，我来帮你搞定这个问题！先看看你的代码里的几个小问题，然后一步步修正，最后给你一些入门的建议～

一、先修正api.js里的错误 #

你的api.js里有语法和逻辑问题，我帮你调整后的代码如下：

var api = class {
  static get baseUrl() { return "http://127.0.0.1:8080/api/"; }
  static get timeout() { return 60 * 1000; }
}

api.rooms = class {
  static get url() { return api.baseUrl + "rooms/"; }
  static getRooms() {
    // 修正拼写错误：api.room.url → api.rooms.url
    // 补充timeout后的逗号，修复语法错误
    return $.ajax({
      url: api.rooms.url,
      method: "GET",
      dataType: "json",
      timeout: api.timeout
    })
    // 将then链式绑定到ajax返回的Promise上，而非timeout属性后
    .then(function(data) {
      // 返回提取后的name数组，供后续调用使用
      return data.rooms.map(item => item.name);
    });
  }
}

修改点说明： #

• 拼写错误：api.room.url改为api.rooms.url，对应你的类命名api.rooms
• 语法错误：timeout: api.timeout后缺少逗号，导致代码解析失败
• 逻辑错误：.then()需要跟在$.ajax()之后（因为$.ajax()返回Promise对象），同时要把map处理后的数组return出去，确保后续能拿到目标数据

二、修正rooms.js里的调用方式 #

getRooms()返回的是Promise（异步操作的容器），不是直接的数组，所以不能直接用[0]取值。你需要通过.then()接收异步返回的结果：

$(document).ready(function() {
  api.rooms.getRooms()
    .then(function(roomNames) {
      // roomNames就是你想要的["Main Bedroom", "Laundry Room"]数组
      $("#title").text(roomNames[0]); // 现在能正确显示第一个房间名了
    })
    .catch(function(error) {
      // 别忘了处理请求失败的情况，比如网络错误、API异常
      console.error("获取房间列表失败:", error);
      $("#title").text("加载失败");
    });
});

为什么要这么做？因为AJAX请求是异步的——代码不会等待请求完成再继续执行，直接用api.rooms.getRooms()[0]时，请求还没结束，拿到的是Promise对象而非数组，自然取不到值。用.then()就能在请求成功后再处理返回的结果。

三、新手入门建议 #

作为刚接触API和JSON的新手，你可以从这几个方向入手：

• 理解异步编程：先搞懂JavaScript的Promise、回调函数，这是处理AJAX请求的核心。可以从setTimeout这类简单异步操作练手，理解“代码不会按顺序同步执行”的特点。
• JSON基础：学会JSON.parse()解析JSON字符串、JSON.stringify()将对象转为JSON，熟悉JSON的结构（键值对、数组、嵌套对象）。
• jQuery AJAX文档：仔细阅读jQuery的AJAX相关文档，了解$.ajax()的参数、返回值，以及.then()、.catch()的用法。
• 调试技巧：学会用浏览器开发者工具（F12），在Network标签查看API请求状态和返回的JSON数据，在Console标签打印变量、排查错误——这是最快的问题定位方法。

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