HTML/jQuery：HTML div是否根据JSON数据动态更改？

我有一个很大的JSON文件，它本质上是一个充满元素的巨大数组。使用jQuery，我想将这个JSON文件加载到HTML页面中，将其转换为可以使用HTML访问的HTML对象或表。完成此操作后，我将在此HTML页面上创建几个圆角div，以模拟条形图。根据服务器上存储的当前JSON数据，这些div的高度会动态变化吗？我怎样才能做到这一切？我只需要知道如何加载JSON数据，转换JSON数据，以及如何根据这些数据改变div。下面是JSON数据和示例DIV代码的示例

换句话说，我希望DIV的高度类似于“height:data[1].key1

JSON示例：

  data: 
   [ { name: 'average',
       key1: x,
       key2: y,
       key3: z },

HTML div示例：

<div style="    margin: 0px auto 10px;
            padding: 4px;
            opacity: 1; border: 1px solid rgb(0, 0, 0);
            box-shadow: 0px 0px 1px rgb(0, 0, 0) inset;
            color: rgb(255, 235, 124);
            float: left;
            width: 0px;
            height: data[1].key1;
            background: #222222;
            left: 55px; 
            position: absolute; 
            top: 259px;
            border-radius: 0px 0px 0px 0px;" class="pane">
</div>

---

使用jQuery，您可以执行以下操作：

$（'.divSelector'）.css（{'height'：数据[1].key1+'px'}）；

看看已经被询问和回答的许多类似问题——你应该在屏幕右侧看到它们。“我只需要知道如何加载JSON数据，转换JSON数据，以及如何根据这些数据改变div。”-啊，仅此而已

：P

通过Ajax获取JSON，使用

JSON.parse（）

解析它，然后通过模板传递对象，并将生成的HTML注入DOM。（我就是这么做的。）