如何将bash脚本生成的JSON数据注入HTML的JavaScript数组变量？

我需要为从API获取的JSON格式数据实现一个简单的按名称搜索过滤器（基于HTML/JavaScript）。已经通过bash脚本将数据格式化为适合JavaScript过滤的结构，但尝试将example.json中的数据插入到index.html的jsonData数组时失败了——此前用相同思路向HTML的div元素插入数据是成功的。

待插入的JSON数据（来自example.json） #

{"name":"vnode","address":"10.19.110.51","group":"windows","responsible":"Alen"},
{"name":"vnode2.izum.pri","address":"10.1.30.100","group":"windows","responsible":"Mario"},
{"name":"vnode3","address":"10.19.110.52","group":"windows","responsible":"John"}

index.html中的目标JavaScript代码 #

<script>
      let jsonData = `[
                  **DATA GOES HERE**
      ]`

      function search_server() {
        let input = document.getElementById("myInput").value;
        input = input.toLowerCase();
        let x = document.querySelector("#myUL");
        x.innerHTML = "1";
        

        for (i = 0; i < data.length; i++) {
          let obj = data[i];

          if (obj.name.toLowerCase().includes(input)) {
            const elem = document.createElement("li");
            elem.innerHTML = `${obj.name} , ${obj.address} , ${obj.group} , ${obj.responsible}`;
            x.appendChild(elem);
          }
        }
      }
</script>

过往成功的div插入脚本 #

reg='<div class="content-middle">'
while IFS= read -r line; do
    printf '%s\n' "$line"
    [[ $line =~ $reg ]] && cat /usr/share/inventory/data.txt
done < /usr/share/inventory/indextemplate.html > /usr/share/inventory/index.html

插入位置：

<div class="content-middle">

</div>

失败的JS数组插入脚本 #

reg='let jsonData = `['
while IFS= read -r line; do
    printf '%s\n' "$line"
    [[ $line =~ $reg ]] && cat /usr/share/inventory/data.txt
done < /usr/share/inventory/indextemplate.html > /usr/share/inventory/index.html

1. 修正bash插入脚本 #

问题出在正则匹配的字符串上：原JS代码中的反引号是bash正则的特殊字符，必须转义，同时要匹配行前的缩进空格。修正后的脚本如下：

# 转义反引号，同时兼容行前的空格
reg='let jsonData = \`\['
while IFS= read -r line; do
    printf '%s\n' "$line"
    if [[ "$line" =~ $reg ]]; then
        cat /usr/share/inventory/data.txt
    fi
done < /usr/share/inventory/indextemplate.html > /usr/share/inventory/index.html

2. 修复JavaScript代码的逻辑问题 #

原JS代码存在两处错误，会导致搜索功能失效：

• jsonData是模板字符串，需要解析为JavaScript数组才能遍历
• x.innerHTML = "1"会导致搜索前残留无用字符，应清空容器

修正后的完整JS代码：

<script>
      let jsonData = `[
                  **DATA GOES HERE**
      ]`;
      // 解析JSON字符串为可操作的数组
      let data = JSON.parse(jsonData);

      function search_server() {
        let input = document.getElementById("myInput").value;
        input = input.toLowerCase();
        let x = document.querySelector("#myUL");
        x.innerHTML = ""; // 清空之前的搜索结果
        

        for (let i = 0; i < data.length; i++) { // 用let声明i，避免全局变量污染
          let obj = data[i];

          if (obj.name.toLowerCase().includes(input)) {
            const elem = document.createElement("li");
            elem.innerHTML = `${obj.name} , ${obj.address} , ${obj.group} , ${obj.responsible}`;
            x.appendChild(elem);
          }
        }
      }
</script>

3. 验证步骤 #

1. 确保/usr/share/inventory/data.txt的最后一个JSON对象后没有多余逗号（现代浏览器可容忍，但去掉能提升兼容性）
2. 运行修正后的bash脚本生成新的index.html
3. 打开页面检查jsonData是否正确填充，测试搜索功能

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