无法通过JSON填充HTML按钮，出现repo未定义错误

问题现象 #

运行代码时控制台抛出Uncaught ReferenceError: repo is not defined，尝试将repo.buttons改为repoId.buttons后错误消失，但4个按钮始终无法从JSON中加载数据完成填充。

错误原因分析 #

1. repo未定义的根源：当URL参数中没有id，或者JSON数组里找不到对应id的对象时，data.find(r => r.id === repoId)会返回undefined，此时直接访问repo.buttons就会触发未定义错误。
2. repoId.buttons无效的原因：repoId是从URL获取的字符串，本身不存在buttons属性，所以不会报错，但也不可能获取到任何按钮数据。
3. 按钮文本不更新的隐藏问题：HTML中按钮文本是直接写在<a>标签内的，没有用<span>包裹，JS代码里btn.find('span').text()找不到目标元素，导致文本无法替换。

修复步骤 #

1. 增加repo存在性判断 #

在访问repo.buttons前，先检查repo是否有效，避免未定义错误。

2. 修正HTML文本结构 #

将按钮文本放入<span>标签中，确保JS能定位到文本元素进行修改。

3. 处理边界情况 #

增加对URL参数缺失、JSON文件加载失败、按钮数组长度不足等场景的兼容处理。

修正后的完整代码 #

HTML代码 #

<div class="d-flex justify-content-around mt-4">
    <a href="#" id="button-1" class="btn btn-primary">
        <img src="" alt="Icon" id="icon-button-1"> <span>Button 1</span>
    </a>
    <a href="#" id="button-2" class="btn btn-primary">
        <img src="" alt="Icon" id="icon-button-2"> <span>Button 2</span>
    </a>
    <a href="#" id="button-3" class="btn btn-primary">
        <img src="" alt="Icon" id="icon-button-3"> <span>Button 3</span>
    </a>
    <a href="#" id="button-4" class="btn btn-primary">
        <img src="" alt="Icon" id="icon-button-4"> <span>Button 4</span>
    </a>
</div>

JS代码 #

$(document).ready(function () {
    const urlParams = new URLSearchParams(window.location.search);
    const repoId = urlParams.get('id');

    // 检查URL是否包含id参数
    if (!repoId) {
        console.warn('URL中缺少id参数');
        return;
    }

    $.getJSON('repositories.json', function (data) {
        const repo = data.find(r => r.id === repoId);

        // 检查repo是否存在且按钮数据有效
        if (!repo || !Array.isArray(repo.buttons)) {
            console.warn('未找到对应id的仓库数据，或按钮数据格式错误');
            return;
        }

        repo.buttons.forEach((button, index) => {
            const btn = $(`#button-${index + 1}`);
            if (btn.length === 0) return;

            // 设置按钮链接
            btn.attr('href', button.link || '#');
            // 设置图标地址
            btn.find('img').attr('src', button.icon || 'default-icon.png');
            // 设置按钮文本
            btn.find('span').text(button.text || `Button ${index + 1}`);
        });

        // 可选：隐藏未填充的多余按钮
        for (let i = repo.buttons.length; i < 4; i++) {
            $(`#button-${i + 1}`).hide();
        }
    }).fail(function() {
        console.error('加载repositories.json文件失败，请检查文件路径是否正确');
    });
});

JSON代码（无需修改） #

[
    {
        "id": "repo1",
        "buttons": [
            {
                "link": "exmpl.html",
                "icon": "exmpl.png",
                "text": "btn exmpl1"
            },
            {
                "link": "exmpl.html",
                "icon": "exmpl.png",
                "text": "btn exmpl2"
            },
            {
                "link": "exmpl.html",
                "icon": "exmpl.png",
                "text": "btn exmpl3"
            },
            {
                "link": "exmpl.html",
                "icon": "exmpl.png",
                "text": "btn exmpl4"
            }
        ]
    },
    {
        "id": "repo2",
        "buttons": [
            {
                "link": "exmpl.html",
                "icon": "exmpl.png",
                "text": "btn exmpl1"
            },
            {
                "link": "exmpl.html",
                "icon": "exmpl.png",
                "text": "btn exmpl2"
            },
            {
                "link": "exmpl.html",
                "icon": "exmpl.png",
                "text": "btn exmpl3"
            },
            {
                "link": "exmpl.html",
                "icon": "exmpl.png",
                "text": "btn exmpl4"
            }
        ]
    }
]

内容的提问来源于stack exchange，提问作者ne slava marlow