JS解析JSON

news2024/9/29 1:30:54

在 JavaScript 中解析 JSON 数据

在 JavaScript 中,您可以使用 JSON.parse() 方法来解析 JSON 数据,示例代码如下:

var json = '{"course": {"name": "JavaScript","author": "http://c.biancheng.net/","year": 2021,"genre": "Getting Started tutorial","bestseller": true},"fruits": ["Apple","Banana","Strawberry","Mango"]}';
var obj = JSON.parse(json);
console.log(obj.course);
console.log(obj.fruits);

在这里插入图片描述

解析嵌套的 JSON 数据

JSON 数据中的对象和数组可以相互嵌套,一个 JSON 对象中可以包含任意类型的数据(例如数组、嵌套数组、其它 JSON 对象等)。对于相互嵌套的 JSON 数据我们要如何获取呢?示例代码如下:

var json = `{
    "book": {
        "name": "Harry Potter and the Goblet of Fire",
        "author": "J. K. Rowling",
        "year": 2000,
        "characters": ["Harry Potter", "Hermione Granger", "Ron Weasley"],
        "genre": "Fantasy Fiction",
        "price": {
            "paperback": "$10.40", "hardcover": "$20.32", "kindle": "$4.11"
        }
    }
}`;
// 将 JSON 数据转换为 JSON 对象
var obj = JSON.parse(json);
// 打印嵌套的 JSON 数据
function printValues(obj) {
    for (var k in obj) {
        if (obj[k] instanceof Object) {
            printValues(obj[k]);
        } else {
            document.write(obj[k] + "<br>");
        };
    }
};
// 调用 printValues() 函数
printValues(obj);
document.write("<hr>");
// 打印 JSON 数据中的单个值
document.write(obj["book"]["author"] + "<br>");         // 输出: J. K. Rowling
document.write(obj["book"]["characters"][0] + "<br>");  // 输出: Harry Potter
document.write(obj["book"]["price"]["hardcover"]);      // 输出: $20.32

运行结果如下图所示:
在这里插入图片描述

将数据转换为 JSON

在开发过程中,有时我们需要将数据转换为 JSON 格式,方便客户端与服务器端进行数据交互。JavaScript 中提供了JSON.stringify()方法来将 JavaScript 值转换为 JSON 格式,如下例所示:

var obj = {
    "name": "JavaScript",
    "author": "http://c.biancheng.net/",
    "year": 2021,
    "genre": "Getting Started tutorial",
    "bestseller": true
};
var json = JSON.stringify(obj);
document.write(json);

运行结果如下:

{“name”:“JavaScript”,“author”:“http://c.biancheng.net/”,“year”:2021,“genre”:“Getting Started tutorial”,“bestseller”:true}
注意:虽然 JavaScript 对象与 JSON 对象看起来非常相似,但它们并不相同,例如在 JavaScript 中,对象的属性名称可以用单引号 ‘’ 或双引号 “” 括起来,也可以完全省略引号。但是,在 JSON 中,所有属性名称都必须用双引号括起来。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/837711.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

拉普拉斯平滑算法

原理 最简单的拉普拉斯平滑算法的原理是将每个顶点都移动到相邻顶点的平均位置上。公式 示例&#xff08;UE5代码片段&#xff09; 参考 https://blog.csdn.net/mrbaolong/article/details/105859109

MyBatis-动态SQL-if and where

动态SQL 随着用户的输入或外部条件的变化而变化的SQL语句&#xff0c;我们称之为动态SQL语句 select *from empwhere name like concat(%, #{name}, %)and gender #{gender}and entrydate between #{begin} and #{end}order by update_time desc; 在上述的SQL语句…

运输层---概述

目录 运输层主要内容一.概述和传输层服务1.1 概述1.2 传输服务和协议1.3 传输层 vs. 网络层1.4 Internet传输层协议 二. 多路复用与多路分解&#xff08;解复用&#xff09;2.1 概述2.2 无连接与面向连接的多路分解&#xff08;解复用&#xff09;2.3面向连接的多路复用*2.4 We…

⌈C++⌋从无到有了解并掌握C++面向对象三大特性——封装、继承、多态

前置知识&#xff1a;类和对象 参考书籍&#xff1a;《C Primer 第五版》 目录 什么是面向过程&#xff1f;什么是面向对象&#xff1f; 一、封装 1、封装的含义以及如何实现封装 1.1 访问限定符&#xff08;访问说明符&#xff09; 1.2 什么是封装&#xff1f; 2、封装的优点…

MySQL~mysql基础应用相关题

整卷阅览&#xff1a; 想要获取试卷原版请点击以下链接下载&#xff1a; https://download.csdn.net/download/qq_53142796/88168133https://download.csdn.net/download/qq_53142796/88168133 解题过程&#xff1a; 数据库&#xff1a;studentdb 数据库表如下&#xff1a; …

数学建模-元胞自动机

clc clear n 300; % 定义表示森林的矩阵大小 Plight 5e-6; Pgrowth 1e-2; % 定义闪电和生长的概率 UL [n,1:n-1]; DR [2:n,1]; % 定义上左&#xff0c;下右邻居 vegzeros(n,n); % 初始化表示森林的矩阵 imh ima…

01-序言

文章作者&#xff1a;里海 来源网站&#xff1a;https://blog.csdn.net/WangPaiFeiXingYuan 简介&#xff1a; 此专栏是学习“线性代数”课程做的笔记&#xff0c;教程来自B站的3Blue1Brown​​​​​​​d​​​​​​​。 视频作者是Grant Sanderson&#xff0c; 他本人是斯坦…

【蓝图】p48冲刺、瞬移、多段跳

p48冲刺&#xff0c;瞬移&#xff0c;多段跳 p48冲刺&#xff0c;瞬移&#xff0c;多段跳冲刺功能实现瞬移功能实现Set Actor Location&#xff08;设置Actor位置&#xff09; 二段跳 p48冲刺&#xff0c;瞬移&#xff0c;多段跳 按shift加速&#xff0c;松开shift恢复普通速度…

echarts-pie---------3D曲状环形饼图实现!!!

示例&#xff08;参考此处饼图修改https://www.isqqw.com/viewer?id37497&#xff09; 话不多说直接上代码 此套代码可以直接再echarts官网中的此处运行 let selectedIndex ; let hoveredIndex ; option getPie3D([{name: 数学,value: 60,itemStyle: {color: #1890FF,},},{…

Vue2 第二十节 vue-router (一)

1.相关概念理解 2.基本路由 3.嵌套路由&#xff08;多级路由&#xff09; 一.相关概念理解 1.1 vue-router的理解 路由&#xff1a;就是一组key-value的对应关系, key为路径&#xff0c;value可能是function或者component多个路由&#xff0c;需要经过路由器的管理编程中的…

【树状数组】讲解

一.介绍 树状数组&#xff08;Fenwick Tree&#xff09;&#xff0c;也称为二叉索引树&#xff08;Binary Indexed Tree&#xff0c;BIT&#xff09;&#xff0c;是一种用于高效处理动态数组前缀和的数据结构。它可以在O(log n)的时间复杂度内完成单点更新和区间查询操作。 树…

【Python】模块学习之locust性能测试

目录 背景 安装 测试代码 运行命令 资料获取方法 背景 locust是一个python的第三方库&#xff0c;用于做性能测试&#xff0c;可使用多台机器同时对一台服务器进行压测&#xff0c;使用其中一台机器作为主节点&#xff0c;进行分布式管理 博主测试接口的时候一直是使用p…

boost beast http server 测试

boost beast http client boost http server boost beast 是一个非常好用的库&#xff0c;带上boost的协程&#xff0c;好很多东西是比较好用的&#xff0c;以下程序使用四个线程开启协程处理进入http协议处理。协议支持http get 和 http post #include <boost/beast/cor…

Windows 系统无法复制粘贴则么处理

Windows 系统无法复制粘贴如何恢复呢&#xff1f; 今天小编遇到一个问题&#xff0c;就是自己的电脑突然无法复制、粘贴&#xff0c;这样的问题我遇到很多次&#xff0c;重启电脑虽然能解决问题&#xff0c;但是不能一直通过重启来解决这样的问题&#xff0c;很浪费时间的。今…

遇到多人协作,我们该用git如何应对?(版本二)

一、多人协作二 1.1多人协作 一般情况下&#xff0c;如果有多需求需要多人同时进行开发&#xff0c;是不会在一个分支上进行多人开发&#xff0c;而是一个需求或一个功能点就要创建一个feature 分支。 现在同时有两个需求需要你和你的小伙伴进行开发&#xff0c;那么你们俩便…

【诺依管理系统-前端】对话框

1.指定 v-model"openAllScene" 2.按钮代码 3.调用方法handleAddAllScene里面&#xff0c;只是openAllScene的值为true&#xff0c;调用显示对话框

论文研读|多媒体自动评论生成发展综述

前言&#xff1a;多媒体自动评论生成旨在通过使用生成模型&#xff0c;对给定上下文生成符合情境的评论&#xff0c;近年来&#xff0c;随着图像描述等跨模态工作取得较大突破&#xff0c;相关研究也逐渐展开。评论作为社交平台互动的重要组成部分&#xff0c;在引导舆论、提升…

Keil MDK环境下FreeModebus移植踩坑记录

Keil MDK环境下FreeModebus移植踩坑记录 文章目录 Keil MDK环境下FreeModebus移植踩坑记录armcc (arm compiler v5)环境实验一&#xff1a;实验二&#xff1a; armclang (arm compiler v6)环境实验一&#xff1a;实验二&#xff1a;实验三&#xff1a;实验四 总结 armcc (arm c…

TCP Socket 基础知识点(实例是以Java进行演示)

本篇根据TCP & Socket 相关知识点和学习所得进行整理所得。 文章目录 前言1. TCP相关知识点1.1 双工/单工1.2 TCP协议的主要特点1.3 TCP的可靠性原理1.4 报文段1.4.1 端口1.4.2 seq序号1.4.3 ack确认号1.4.4 数据偏移1.4.5 保留1.4.6 控制位1.4.7 窗口1.4.8 校验和1.4.9 紧…

Qt事件的传递顺序

事件的传递顺序 事件的传递顺序是这样的&#xff1a;先是事件过滤器&#xff0c;然后是该部件的event()函数&#xff0c;最后是该部件的事件处理函数。这里还要注意&#xff0c;event()函数和事件处理函数&#xff0c;是在该部件内进行重新定义的&#xff0c;而事件过滤器却是…