data : {hhh:{name:111,id:12312},hhh2:{name1:2333,id:34441}} 这种数据类型怎么渲染完整代码演示
时间: 2024-05-01 07:23:13 浏览: 9
这种数据类型可以使用 JavaScript 的 `for...in` 循环来遍历对象,并使用模板字符串来渲染数据。以下是一个完整的代码演示:
```html
<div id="app"></div>
```
```javascript
const data = {
hhh: { name: '111', id: '12312' },
hhh2: { name1: '2333', id: '34441' }
};
const app = document.getElementById('app');
for (let key in data) {
const item = data[key];
let html = '';
for (let prop in item) {
html += `<p>${prop}: ${item[prop]}</p>`;
}
const div = document.createElement('div');
div.innerHTML = html;
app.appendChild(div);
}
```
上述代码首先定义了一个包含对象数据的变量 `data`,然后使用 `for...in` 循环来遍历对象。在循环中,首先获取当前对象的值 `item`,然后使用 `for...in` 循环遍历该对象的属性,并将属性和属性值使用模板字符串拼接成 HTML 代码。最后创建一个 `<div>` 元素,将 HTML 代码赋值给该元素的 `innerHTML` 属性,并将该元素添加到页面中的 `<div id="app">` 中。运行代码后,即可看到渲染出的数据。