ES6,读取json数据并生成html
时间: 2023-07-25 12:04:49 浏览: 63
可以使用ES6中的 `fetch` 方法来读取JSON数据,然后使用模板字符串(template literals)来生成HTML。下面是一个示例代码:
```javascript
// 获取JSON数据
fetch('data.json')
.then(response => response.json())
.then(data => {
// 生成HTML
const html = `
<ul>
${data.map(item => `
<li>
<h2>${item.title}</h2>
<p>${item.description}</p>
</li>
`).join('')}
</ul>
`;
// 将HTML插入到页面中
document.querySelector('#app').innerHTML = html;
});
```
在这个示例中,我们首先使用 `fetch` 方法获取JSON数据,并将其解析为JavaScript对象。然后,使用数组的 `map` 方法遍历数据中的每个元素,并使用模板字符串生成HTML代码。最后,我们将生成的HTML插入到页面中。
请注意,上述示例假设你的JSON数据是一个包含多个项目的数组。如果你的JSON数据格式不同,你需要根据实际情况进行修改。
相关问题
es6 复杂json对象字符串内容替换
您可以使用JSON.parse()将JSON字符串解析为对象,然后使用递归函数遍历该对象,查找并替换需要替换的内容。这里是一个简单的示例代码:
```javascript
function replaceJsonString(jsonString, oldStr, newStr) {
const obj = JSON.parse(jsonString);
replaceObject(obj, oldStr, newStr);
return JSON.stringify(obj);
}
function replaceObject(obj, oldStr, newStr) {
for (let key in obj) {
if (typeof obj[key] === 'object' && obj[key] !== null) {
replaceObject(obj[key], oldStr, newStr); // 递归处理子对象
} else if (typeof obj[key] === 'string') {
obj[key] = obj[key].replace(oldStr, newStr); // 替换字符串内容
}
}
}
```
使用方法:
```javascript
const jsonString = '{"name": "张三", "address": {"province": "广东省", "city": "深圳市"}, "hobbies": ["篮球", "游泳"]}';
const oldStr = '深圳市';
const newStr = '广州市';
const newJsonString = replaceJsonString(jsonString, oldStr, newStr);
console.log(newJsonString); // 输出: {"name":"张三","address":{"province":"广东省","city":"广州市"},"hobbies":["篮球","游泳"]}
```
注意:这里的代码只是一个简单的示例,不一定适用于所有的复杂JSON对象。根据实际需求,您可能需要进行适当的修改。
es6 使用createDocumentFragment()方法生成HTML
`createDocumentFragment()`并不是用来生成HTML的方法,而是用来创建一个空白的文档片段(DocumentFragment)对象的方法。文档片段是一个轻量级的文档对象,可以包含其他的节点,但它本身不是文档树的一部分。使用文档片段可以在将多个元素插入文档时,避免频繁的DOM操作,提高性能。
如果要生成HTML元素,可以使用`createElement()`方法创建元素节点,并使用`appendChild()`方法将元素节点添加到文档中。例如:
```javascript
const container = document.querySelector("#container");
const div = document.createElement("div");
div.textContent = "Hello, world!";
container.appendChild(div);
```
这个例子中,我们使用`createElement()`方法创建一个`<div>`元素,并将其添加到`<div id="container">`元素中。
相关推荐
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)