JS中巧妙使用JSON教程

简介: 1.JSON.parse()我们可以使用 JSON.parse() 方法将数据转换为 JavaScript 对象案例:


1.JSON.parse()


我们可以使用 JSON.parse() 方法将数据转换为 JavaScript 对象

案例:


<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>TEXT</title>
  <script type="text/javascript" src="js/index.js"></script>
</head>
<body>
  <p id="demo"></p>
</body>
</html>


window.onload = function() {
  var getJsonStr = '{ "name":"xxx", "alexa":10000, "site":"www.xxx.com" }';
  var obj = JSON.parse(getJsonStr);
  document.getElementById("demo").innerHTML = obj.name;
}


2.JSON & Date


JSON 不能存储 Date 对象。

如果你需要存储 Date 对象,需要将其转换为字符串。

之后再将字符串转换为 Date 对象。


window.onload = function() {
  var getJsonStr = '{ "name":"xxx", "alexa":10000, "site":"www.xxx.com" ,"initDate":"2013-12-14" }';
  var obj = JSON.parse(getJsonStr);
  obj.initDate = new Date(obj.initDate);
  document.getElementById("demo").innerHTML = obj.initDate;
}


3.JSON.stringify()


我们可以使用 JSON.stringify() 方法将 JavaScript 对象转换为字符串

实例:


window.onload = function() {
  var obj = { "name":"xxx", "alexa":10000, "site":"www.xxx.com"};
  var myJSON = JSON.stringify(obj);
  document.getElementById("demo").innerHTML = myJSON;
}



目录
相关文章
|
1月前
|
JSON JavaScript 前端开发
JavaScript实现字符串转json对象的方法
JavaScript实现字符串转json对象的方法
|
2月前
|
JavaScript
vue中使用 HotKeys.js 教程(按键响应、快捷键开发)
vue中使用 HotKeys.js 教程(按键响应、快捷键开发)
130 0
|
22天前
|
JavaScript NoSQL 前端开发
|
28天前
|
JSON JavaScript 前端开发
JavaScript JSON
JavaScript JSON
|
2月前
|
存储 JSON 数据格式
Python教程:json中load和loads的区别
【7月更文挑战第17天】在Python的`json`模块中, `load`与`loads`函数均用于JSON至Python对象的转换, 区别在于: - **`loads`**处理JSON格式的**字符串** 其中`data.json`文件内容为`{&quot;name&quot;: &quot;Bob&quot;, &quot;age&quot;: 30}`。 简而言之, `loads`用于字符串, 而`load`用于文件对象。根据数据来源选择合适的方法。
|
1月前
|
存储 JSON 数据格式
Pandas 使用教程 CSV - CSV 转 JSON
Pandas 使用教程 CSV - CSV 转 JSON
18 0
|
1月前
|
JSON 数据格式 Python
Pandas 使用教程 JSON
Pandas 使用教程 JSON
25 0
|
1月前
|
存储 JSON JavaScript
js之JSON
js之JSON
24 0
|
2月前
|
JSON JavaScript 数据格式
vue 绘制波形图 wavesurfer.js (音频/视频) 【实用教程】
vue 绘制波形图 wavesurfer.js (音频/视频) 【实用教程】
267 3
|
2月前
|
JavaScript 前端开发 CDN
前端 JS 经典:package.json 属性详解
前端 JS 经典:package.json 属性详解
23 1