jquery/ajax如何遍历包含重复键的JSON响应消息？

你遇到的问题是JSON对象键名重复导致的默认覆盖：JSON规范要求同一个对象内的键名必须唯一，你当前的响应结构里，images和features字段下重复使用element作为键名，JS解析JSON时会默认用后出现的同键名值覆盖前面的值，因此解析完成后只会保留最后一个element的内容。

1. 优先调整后端返回的JSON结构（最优解） #

把images、features下的重复element对象修改为数组格式，修正后的响应结构参考如下：

{
    "line": {
        "name": "Google item",
        "images": [
            {
                "order": "1",
                "link": "https://google.com/1.jpg",
                "name": "1.jpg"
            },
            {
                "order": "2",
                "link": "https://google.com/2.jpg",
                "name": "2.jpg"
            },
            {
                "order": "3",
                "link": "https://google.com/3.jpg",
                "name": "3.jpg"
            },
            {
                "order": "4",
                "link": "https://google.com/4.jpg",
                "name": "4.jpg"
            },
            {
                "order": "5",
                "link": "https://google.com/5.jpg",
                "name": "5.jpg"
            }
        ],
        "features": [
            {
                "name": "1",
                "order": "1"
            },
            {
                "name": "2",
                "order": "2"
            },
            {
                "name": "3",
                "order": "3"
            },
            {
                "name": "4",
                "order": "4"
            }
        ],
        "purchasing_price": "10",
        "selling_price": "20",
        "ftp_path": "google/item",
        "description": ""
    }
}

2. 调整前端解析代码 #

同时需要修正你原有代码中的ID重复问题：同一个页面内不允许出现多个相同ID的元素，你之前重复生成id="feature"的输入框会导致DOM操作异常，修正后的代码参考如下：

function parseContent(content){
    $("#name").val(content.line.name);
    $("#ftp_path").val(content.line.ftp_path);
    $("#html_description").val(content.line.description);

    // 用类选择器删除所有已存在的特性输入框
    $(".feature").remove();
    // 遍历特性数组
    $.each(content.line.features, function(index, item){
        $("#features").append(`<input type="text" class="form-control mt-3 feature" value="${item.name}" required>`);
    });

    // 如果需要遍历图片也可以用同样的逻辑
    $(".image-item").remove();
    $.each(content.line.images, function(index, item){
        $("#images").append(`<img class="image-item mt-2" src="${item.link}" alt="${item.name}">`);
    });
}

如果暂时无法调整后端返回结构，你可以先获取原始的响应字符串，手动替换后再解析，但该方案兼容性差，不推荐长期使用。

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