如何用jQuery遍历dummyjson接口返回的30条产品数据？

你当前请求的是单个产品的接口，返回的是单个产品对象，而非包含30条产品的数组。要获取全部30条产品，得请求产品列表接口。

修改后的代码如下：

$.get("https://dummyjson.com/products")
    .done(function(data, textStatus, jqXHR){
        // 接口返回的数据里，products字段是包含30条产品的数组
        const products = data.products;
        
        // 遍历产品数组，打印每条产品的核心详情
        products.forEach(function(product) {
            console.log("产品名称:", product.title);
            console.log("产品价格:", product.price);
            console.log("产品描述:", product.description);
            console.log("---"); // 分隔每条产品
        });

        // 如果需要查看单条产品的所有属性，可嵌套遍历
        products.forEach(function(product, index) {
            console.log(`第${index+1}条产品完整详情:`);
            Object.keys(product).forEach(function(key) {
                console.log(`${key}: ${product[key]}`);
            });
            console.log("====");
        });
    })
    .fail(function(jqXHR, textStatus, errorThrown){
        alert("请求失败");
        console.log("错误状态:", textStatus);
        console.log("错误信息:", errorThrown);
    });

关键说明 #

• 产品列表接口返回的是一个对象，其中products属性才是包含30条产品的数组，必须先取出这个数组再遍历。
• jQuery的$.get请求JSON接口时会自动解析为JavaScript对象，你之前写的JSON.parse(JSON.stringify(data))属于多余操作，可直接使用返回的data。
• 遍历数组时，直接通过forEach就能拿到每条产品对象，之后可以直接访问对象的属性（如title、price），也可以用Object.keys遍历单个产品的所有属性。

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