JS中生成与解析JSON

Js动态解析多层级json数据生成html页面 在实际项目中,我们经常需要从后端获取JSON数据,并将其转换为可视化的HTML内容。通过JavaScript处理多层级的JSON数据结构,不仅可以提升用户体验,还能实现灵活的内容展示和交互功能。通过以上内容的学习,读者可以掌握如何使用JavaScript动态解析多层级JSON数据并生成HTML页面。希望您在这里可以感受到一份轻松愉快的氛围,不仅可以获得有趣的内容和知识,也可以畅所欲言、分享您的想法和见解。在单页应用(SPA)中,可以通过AJAX请求获取JSON数据,并动态更新页面内容,从而避免页面刷新。 阅读详情


js中生成json对象


js中解析json字符串:

1.eval("..."):

  var a_id=eval(‘{"name":123}’);

  如果eval中的内容含有恶意脚本就麻烦了


2.json_parse:

  需要导入json_parse.js:

  <script src="js/json_parse.js"></script>  
  <script language="javascript">  
      var t = json_parse('{"name":123}');  
      alert(t.name);  
  </script>>

  安全,解析速度快


3.var vjson = JSON.parse(jsonstr):

  支持IE8和fireFox3这两个有内置json对象的浏览器;其他浏览器要引入json.js文件

  <script src="js/json.js"></script>  
  <script language="javascript">  
      var t = JSON.parse('{"name":123}');  
      alert(t.name);  
  </script> 
  安全,解析速度也很快。




----------------------------------分割线-------------------------------------------------------

js中解析json字符串



JSON.stringify:

语法: 
JSON.stringify
(value [, replacer] [, space]) 
value:是必须要的字段。就是你输入的对象,比如数组啊,类啊等等。 
replacer:这个是可选的。它又分为2种方式,一种是方法,第二种是数组。 
情况一:我们先说数据,通过我们后面的实验可以知道,它是和第一个有关系的。一般来说,我们系列化后的结果是通过键值对来进行表示的。 
比如说: 
name:"lan",age:25 
这种形式。 
所以,如果这种形式的话,如果第二个的值在第一个存在,那么的话就以第二个的值做key,第一个值为value进行表示,如果不存在,sorry,忽略。【是不是有点抽象,我也这么觉得,不过你等一下看实验 就OK了。。呼呼。】 
情况二:如果是方法,那很简单,就是说把系列化后的每一个对象(记住 是每一个)传进方法里面进行处理。 
space:很好理解,用什么来做分隔符的。 
1.如果省略的话,那么显示出来的值 就没有分隔符。直接输出来 
2.如果是一个数字的话,那么它就定义缩进几个字符,当然 如果大于10 ,则最大值为10. 
3.如果是一些转义字符,比如“\t”,表示回车,那么它每行一个回车。 
4.如果仅仅是字符串,OK,就在每行输出值的时候把这些字符串附加上去就OK。当然,最大长度也是10个字符。 
开始用实例说明; 
1.只有一个参数的情况下: 

复制代码 代码如下:

var student = new Object(); 
student.name = "Lanny"; 
student.age = "25"; 
student.location = "China"; 
var json = JSON.stringify(student); 
alert(student); 

结果如下: 

有些人可能会怀疑JSON.stringify的作用,OK。那假如,我们不要这个函数。代码下面的样子: 
复制代码 代码如下:

var student = new Object(); 
student.name = "Lanny"; 
student.age = "25"; 
student.location = "China"; 

// var json = JSON.stringify(student); 
alert(student); 

 恭喜你 得到的结果是: 

没骗你吧,继续。
2.第二个参数存在,并且第二个参数还是function的时候 

复制代码 代码如下:

var students = new Array() ; 
students[0] = "Lanny"; 
students[1] = "dong"; 
students[2] = "I love you"; 
var json = JSON.stringify(students,switchUpper); 
function switchUpper(key, value) { 
return value.toString().toUpperCase(); 
} 
alert(json); 

        //var json = JSON.stringify(students, function (key,value) { 

        //return value.toString().toUpperCase(); 

       //}); 

    上面的方法也可以换成下面的,2个都是一样,只是写法有那么一点点的不一样而已。 
 得到结果如下: 

3.第二个参数存在,并且第二个参数不是function,而是数组的时候。 
3.1 【误区】如果第一个参数是数组,第二个参数也是数组的话,只显示第一个参数的值。 
比如: 

复制代码 代码如下:

var students = new Array() ; 
students[0] = "Lanny"; 
students[1] = "dong"; 
students[2] = "I love you"; 
var stu = new Array(); 
stu[0] = "1"; 
stu[1] = "2"; 
var json = JSON.stringify(students,stu); 
alert(json); 

 sorry 得到的结果就是: 

第二个被忽略了,只是第一个被系列化了。 

3.2 如果第一个是对象(这里说的对象就像在C#里面可以进行new的),第二个是数组的。 

那么如果第二个的value在第一个存在,那么的话就以第二个的值做key,第一个值为value进行表示 
复制代码 代码如下:

var student = new Object(); 
student.qq = "5485891512"; 
student.name = "Lanny"; 
student.age = 25; 

var stu = new Array(); 
stu[0] = "qq"; 
stu[1] = "age"; 
stu[2] = "Hi";//这个student对象里不存在。 

var json = JSON.stringify(student,stu); 
alert(json); 

 得到的结果如下: 

因为stu[2] = "Hi";这个Hi 在第一个找不到,所以就不进行显示了。 

4.第三个参数 

4.1.如果省略的话,那么显示出来的值 就没有分隔符。直接输出来 

比如: 
复制代码 代码如下:

var student = new Object(); 
student.qq = "5485891512"; 
student.name = "Lanny"; 
student.age = 25; 

var stu = new Array(); 
stu[0] = "qq"; 
stu[1] = "age"; 
stu[2] = "Hi"; 

var json = JSON.stringify(student,stu); 
alert(json); 

 输出的就是: 

4.2.如果是一个数字的话,那么它就定义缩进几个字符,当然 如果大于10 ,则最大值为10. 
复制代码 代码如下:

var student = new Object(); 
student.qq = "5485891512"; 
student.name = "Lanny"; 
student.age = 25; 

var stu = new Array(); 
stu[0] = "qq"; 
stu[1] = "age"; 
stu[2] = "Hi"; 

var json = JSON.stringify(student,stu,100);//注意这里的100 
alert(json); 

那么得到的是: 

空开来了10个字符。 

4.3.如果是一些转义字符,比如“\t”,表示回车,那么它每行一个回车。 

也是一样。 

4.4.如果仅仅是字符串,OK,就在每行输出值的时候把这些字符串附加上去就OK。当然,最大长度也是10个字符。 

如果是var json = JSON.stringify(student,stu,“HaiKou”);//


--------------------------------------------------------------------------------------------------------------------------

var dataObj=eval("("+data+")");//转换为json对象

Red rose为什么要 eval这里要添加 “("("+data+")");//”呢?

原因在于:eval本身的问题。 由于json是以”{}”的方式来开始以及结束的,在JS中,它会被当成一个语句块来处理,所以必须强制性的将它转换成一种表达式。

加上圆括号的目的是迫使eval函数在处理JavaScript代码的时候强制将括号内的表达式(expression)转化为对象,而不是作为语 句(statement)来执行。举一个例子,例如对象字面量{},如若不加外层的括号,那么eval会将大括号识别为JavaScript代码块的开始 和结束标记,那么{}将会被认为是执行了一句空语句。所以下面两个执行结果是不同的:
alert(eval("{}"); // return undefined
alert(eval("({})");// return object[Object]

对于这种写法,在JS中,可以到处看到。

如: (function()) {}();  做闭包操作时等。



js-jsonpath:JavaScript JSON 路径助手 JSON 路径助手 JSON Path Helper 是一个简单的工具,可帮助程序员恢复给定 JSON blob 的 JSON 路径表达式。 代码运行在 此代码高度基于的 jsonlint 项目 麻省理工学院执照 版权所有 (C) 2015 Jon Erickson 2012 Zachary Carter 特此授予任何人免费获得本软件和相关文档文件(“软件”)副本的许可,不受限制地处理本软件,包括但不限于使用、复制、修改、合并的权利、发布、分发、再许可和/或出售软件的副本,并允许向其提供软件的人员这样做,但须符合以下条件: 上述版权声明和本许可声明应包含在软件的所有副本或重要部分中。 本软件按“原样”提供,不提供任何形式的明示或暗示的保证,包括但不限于适销性、特定用途的适用性和不侵权的保证。 在任何情况下,作者或版权持有人均不对任何索赔、损害或其他责任承担责任,无论是在合同诉讼、 立即下载

相关推荐

PDF批量加水印 与 去除水印实践

我们可以给PDF加图片水印或文字水印,要去除图片水印,一般只需要删除最后一个图片对象即可。要去除文字水印,需要保证主体内容和文字水印在/Contents中位于不同的对象内,这样我们只需要删除文字水印对应的对象即可删除水印。而对于主体内容和文字水印已经混合在一个对象时,本文的提供的方法则无能为力,需要进一步深入分析PDF细节。

小小明-代码实体的专栏 2763

一个输入JSON能对每一个节点都生成JsonPath的小工具

可以在左侧输入json格式的数据,中间会格式化json数据,对每一个key都生成一个按钮。右侧中间是显示jsonpath的完整路径的文本区域,也可以自己手动输入来调试输出结果。点击按钮的时候在右侧上方会生成jsonpath的地址,同时也会自动复制。纯html\css\js做的。使用了jsonPlus代码。本人不太会前端代码,但是功能是好用的。

qq_22213171的博客 907

BMS菊花链芯片怎么选?一张表对比ADI、TI、NXP五大厂家的隔离通信方案

本文深入对比了ADI、TI、NXP等五大厂商的BMS菊花链芯片隔离通信方案,涵盖技术演进、核心参数和场景化选型策略。通过实测数据和开发经验分享,帮助工程师在新能源汽车和储能系统中选择最优方案,提升通信可靠性和成本效益。

weixin_33724046的博客 433

Json对象与Json字符串互转(4种转换方式)

原文地址:http://www.jb51.net/article/35090.htm Json字符与Json对象的相互转换方式有很多,接下来将为大家一一介绍下,感兴趣的朋友可以参考下哈,希望可以帮助到你 1、jQuery插件支持的转换方式: $.parseJSON( jsonstr ); //jQuery.parseJSON(jsonstr),可以将json字符串转换成j...

weixin_30569153的博客 2140

FPGA开发者必看:如何用SATA3.0主机控制器IP实现高速存储扩展(附Xilinx实测数据)

本文为FPGA开发者提供了基于SATA3.0主机控制器IP核的高速存储方案设计与优化指南。通过详细解析IP核架构、Xilinx FPGA平台集成实战及性能优化技巧,帮助开发者实现接近理论极限的540MB/s数据传输速度。文章还包含常见问题解决方案和高级应用场景拓展,是硬件工程师提升存储性能的必备参考。

weixin_30632089的博客 115

NLP自然语言处理:神经网络语言模型(NNLM)

目录 一、传统语言模型 1.1 稀疏性 1.2泛化能力差 二、神经网络语言模型 2.1 前馈神经网络模型(FFLM) 2.2 循环神经网络模型(RNNLM) 2.2.1循环神经网络模型示例 2.2.2RNN语言模型训练过程 2.2.3RNN语言模型反向传播 2.2.4语言模型评估 语言模型的构建目的是为了对语言中的各要素的分布进行估计,具有较长的研究历史和广泛...

陈宸的博客 1万+

JavaScript 实现字符串转JSON对象的四种方法

在很多时候我们都需要将数据转换为JSON的格式去进行请求,这里就给大家介绍几种转JSON的方法

qq_68862343的博客 1万+

【fNIRS可视化学习1】基于NIRS-SPM进行光极可视化并计算通道坐标

设头皮上的目标点为P₀(x₀, y₀, z₀),需要在大脑皮层点集S上找到最合适的投影点P'。

Rose9614的博客 2212

JavaScript对象与JSON格式的转换

JavaScript对象和JSON格式的转换在Web开发中非常常见,是Web应用程序的基本组成部分之一。JavaScript对象和JSON格式的相互转换通常使用JSON.stringify()和JSON.parse()方法,也可以使用手动转换或第三方库来实现。在实际开发中,JavaScript对象和JSON格式的转换被广泛应用于数据交换、数据存储等方面。

tyxjolin的专栏 1万+

用OpenIPC复活你的旧摄像头:手把手教你给君正T31芯片设备刷开源固件

本文详细介绍了如何使用OpenIPC项目为君正T31芯片的旧摄像头刷入开源固件,解锁更多功能并延长设备寿命。从硬件识别、风险控制到详细刷机步骤和后期配置,手把手教你将闲置摄像头改造为智能监控设备,实现隐私可控、功能扩展等优势。

weixin_30790841的博客 772

5分钟搞懂知识抽取:如何把非结构化数据变成知识图谱的宝藏?

本文通过一个电商评论分析实战案例,详细解析了如何利用spaCy、Neo4j等工具,将非结构化文本数据转化为结构化知识图谱的完整流程。文章重点阐述了知识抽取的核心步骤,包括命名实体识别、关系抽取以及知识存储与查询,帮助读者快速掌握将数据转化为知识宝藏的关键技术。

weixin_29054245的博客 236

js怎么解析json数据

js解析json数据,可以使用JSON.parse()方法来实现解析。JSON.parse()方法可以解析JSON字符串,转换为 JavaScript 对象 打造全网web前端全栈资料库(总目录)看完学的更快,掌握的更加牢固,你值得拥有(持续更新) 下面我们就结合简单的代码示例,给大家介绍js解析json数据的实现方法。 代码示例如下: <!DOCTYPE html> <html lang="en"> <head> <meta charset="

lin123_00的博客 1万+

AFL源码分析之afl-as.c详细注释

前言 afl-as注释好了,明白了是如何进行插桩的,以及插在哪里 本文主要参考Sakura大佬文章:https://eternalsakura13.com/2020/08/23/afl/ 编写不易,如果能够帮助到你,希望能够点赞收藏加关注哦Thanks♪(・ω・)ノ /* Copyright 2013 Google LLC All rights reserved. Licensed under the Apache License, Version 2.0 (the "License"); y

hollk’s blog 2174

JS中生成和解析JSON

1、JS中生成JSON对象的方法: var json = []; var row1 = {}; row1.id= "1"; row1.name = "jyy"; 或者var row2 = {id:'2',name:'abc'} json.push(row1); json.push(row2); 2、JS中将JSON对象解析为字符串的方法: var jsonStr = JSON.stringify(...

旗鼓相当的对手的博客 265

怀旧版电脑GBC模拟器

再现原版GBC掌机的界面,电脑运行连游戏界面都一样大小,很怀旧,很真实,(英文版)强烈推荐,很小的文件,很难才找到的。

计算机控制技术及应用

《计算机控制技术及应用》通过总结作者的科研成果和吸收国内外的先进理论、方法和技术,以计算机控制系统的网络化、开放化、智能化和集成化发展趋势为主线索,主要介绍计算机控制系统的基本概念和计算机控制系统的典型形式,计算机控制系统的数学描述与基本分析方法,以及数字PID控制器、最少拍控制系统、达林算法、状态变量设计法等设计方法及其各种改进算法。重点突出计算机控制系统输入输出通道接口的设计方法和典型控制系统的设计案例与实现方法等。

转:JS中生成和解析JSON

建议参考:w3c json教程 JSON 实例 { "employees": [ { "firstName":"John" , "lastName":"Doe" }, { "firstName":"Anna" , "lastName":"Smith" }, { "firstName":"Peter" , "last...

weixin_33672400的博客 147

Outlook Express 6 (OE6) for Win7/Win8/Win10

英文版 Outlook Express6.0, 兼容Win7/Win10/WinXP,解压就可用。

上一篇: jQuery学习第八课(jquery中的ajax)
下一篇: jQuery学习第九课(ajax实例、jquery插件编写模板及实例)
栖息
博客等级 码龄15年 64粉丝 258原创
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付:10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值