使用 jQuery 模板处理有些复杂的 JSON 数据

发布于 2024-10-22 04:49:15 字数 1249 浏览 6 评论 0原文

我不是 JS 专家，但我已经获得了一个使用 jQuery 显示的 JSON 模型，并且对 jQuery 模板抱有希望。然而，所有文档示例似乎都是针对简单的 2 级数组，我无法将这些示例转换为我拥有的 JSON。我不清楚是否应该使用 jQuery.tmpl()、{{each}} 或 {{tmpl}} > 或 {{wrap}} 迭代此数据。

我需要获取下面的 JSON 并显示每个“主机”名称，后跟其“状态”详细信息（CPU、磁盘、内存）。非常感谢任何有关如何继续的提示。

{"health":64,
"hosts":[
        {
        "name":"Windows2000P",
        "states":[
            {"name":"CPU","link":"(html link)","bgcolor":"#CC99CC"},
            {"name":"Disk","link":"(html link)","bgcolor":"#CC99CC"},
            {"name":"Mem","link":"(html link)","bgcolor":"#CC99CC"}
            ]
        },
        {
        "name":"Windows2003",
        "states":[
            {"name":"CPU","link":"(html link)","bgcolor":"#98FB98"},
            {"name":"Disk","link":"(html link)","bgcolor":"#98FB98"},
            {"name":"Mem","link":"(html link)","bgcolor":"#F08080"}
            ]
        },
        {
        "name":"Windows7",
        "states":[
            {"name":"CPU","link":"(html link)","bgcolor":"#98FB98"},
            {"name":"Disk","link":"(html link)","bgcolor":"#98FB98"},
            {"name":"Mem","link":"(html link)","bgcolor":"#F08080"}
            ]
        }
    ]
}

原文

I'm not a JS expert but I've been given a JSON model to display using jQuery, and have my hopes up for jQuery Templates. However all the documentation examples seem to be for simple 2-level arrays, and I can't translate these examples to the JSON I have. I'm not clear on whether I should be working with jQuery.tmpl(), or {{each}} or {{tmpl}} or {{wrap}} to iterate through this data.

I need to acquire the JSON below and display each "host" name followed by its "states" details (CPU, Disk, Mem.) Any hints on how to proceed are much appreciated.

{"health":64,
"hosts":[
        {
        "name":"Windows2000P",
        "states":[
            {"name":"CPU","link":"(html link)","bgcolor":"#CC99CC"},
            {"name":"Disk","link":"(html link)","bgcolor":"#CC99CC"},
            {"name":"Mem","link":"(html link)","bgcolor":"#CC99CC"}
            ]
        },
        {
        "name":"Windows2003",
        "states":[
            {"name":"CPU","link":"(html link)","bgcolor":"#98FB98"},
            {"name":"Disk","link":"(html link)","bgcolor":"#98FB98"},
            {"name":"Mem","link":"(html link)","bgcolor":"#F08080"}
            ]
        },
        {
        "name":"Windows7",
        "states":[
            {"name":"CPU","link":"(html link)","bgcolor":"#98FB98"},
            {"name":"Disk","link":"(html link)","bgcolor":"#98FB98"},
            {"name":"Mem","link":"(html link)","bgcolor":"#F08080"}
            ]
        }
    ]
}

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

余罪 2024-10-29 04:49:15

以下是您可能使用的模板类型的示例：

<script type="text/x-jquery-tmpl">
  <h2>${health}</h2>

  {{each hosts}}
  <h3>${name}</h3>

  <ul>
    {{each states}}
    <li style="background-color: ${bgcolor};"><a href="${link}">${name}</li>
    {{/each}}
  </ul>
  {{/each}}
</script>

Here's an example of the kind of template you might use:

<script type="text/x-jquery-tmpl">
  <h2>${health}</h2>

  {{each hosts}}
  <h3>${name}</h3>

  <ul>
    {{each states}}
    <li style="background-color: ${bgcolor};"><a href="${link}">${name}</li>
    {{/each}}
  </ul>
  {{/each}}
</script>

回复收藏 0 原文

~没有更多了~