将数组转换为JSON数据

2023-05-16

如何将数组转换为JSON数据?下面本篇就来给大家介绍一下将数组转换为JSON对象的方法,希望对大家有所帮助。

 

方法一:使用Object.assign()

Object.assign()方法将枚举的所有属性的值从源对象(一个或多个)复制到目标对象

语法:

Object.assign(target, ...sources)

参数:

● target:它指定目标对象。

● sources:它指定源对象。

例:将JS数组转换为JSON对象

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
	</head>

	<body style = "text-align:center;" id = "body">   
        <p id = "demo" style = "font-size: 16px;"> 
          
        </p> 
        <button onclick = "Run()">转换</button> 
        <p id = "DOWN" style = "color:green;  
           font-size: 20px; font-weight: bold;"> 
        </p> 
        <script> 
            var el_up = document.getElementById("demo"); 
            var el_down = document.getElementById("DOWN"); 
            var array = [34, 24, 31, 48]; 
            el_up.innerHTML = "Array = [" +array+"]";; 
            function Run(){ 
            el_down.innerHTML =  
            "JSON Object = "+JSON.stringify(Object.assign({}, array));   
            }            
        </script>  
    </body>   
</html>

效果图:

1.gif

方法二:使用JSON.stringify()

使用JSON是与Web服务器交换数据。在将数据发送到Web服务器时,数据需要是字符串。

可以使用JSON.stringify()方法将数组转换为JSON字符串。

语法:

JSON.stringify(Javascript Object)

参数:

● Javascript对象:它指定JavaScript对象。

示例:将JS数组转换为JSON 字符串

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
	</head>

	<body style = "text-align:center;" id = "body">   
        <p id = "demo" style = "font-size: 16px;"> 
          
        </p> 
        <button onclick = "Run()">转换</button> 
        <p id = "DOWN" style = "color:green;  
           font-size: 20px; font-weight: bold;"> 
        </p> 
        <script> 
            var el_up = document.getElementById("demo"); 
            var el_down = document.getElementById("DOWN"); 
            var array = [34, 24, 31, 48]; 
            el_up.innerHTML = "Array = [" +array+"]";; 
            function Run(){ 
            el_down.innerHTML = "JSON_String = '"+JSON.stringify(array)+"'";   
            }                      
        </script>  
    </body>   
</html>

效果图:

2.gif

更多web前端知识,请查阅 HTML中文网 !!

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

将数组转换为JSON数据 的相关文章

  • 熵 KL散度 交叉熵的理解

    熵 KL散度 交叉熵的概念 xff1a 理解二分类交叉熵 可视化的方法解释对数损失交叉熵公式推导 xff1a 理解交叉熵作为损失函数在神经网络中的作用熵 KL散度 交叉熵的关系 xff1a KL散度与交叉熵区别与联系训练过程中三者的应用 x
  • Docker数据目录迁移解决方案

    介绍 在docker的使用中随着下载镜像越来越多 xff0c 构建镜像 运行容器越来越多 数据目录必然会逐渐增大 xff1b 当所有docker镜像 容器对磁盘的使用达到上限时 xff0c 就需要对数据目录进行迁移 如何避免 xff1a 1
  • Git 三剑客 ———— git gui 可视化工具

    目录 页面介绍Unstaged changesStaged Changes xff08 Will Commit xff09 File DisplayCommand Set Repository 操作区Edit 操作区Branch 操作区Co
  • 数组对象转json格式

    1 数组转化成JSON对象后 xff0c key值是索引 xff0c value是数组对应的值 数组也可以转化成JSON对象 var jStr3 61 34 10 20 30 40 50 60 34 var j3 61 JSON parse
  • JS——DOM的结点操作

    H5自定义属性 自定义属性目的 目的 xff1a 是为了保存并且使用数据 有些数据可以把保存到页面中而不用保存到数据库 可以通过getAttribute获取 自定义属性 xff1a data 开头 这是一种规范 dataset xff1a
  • SecureCRT连接Linux

    在将SecureCRT连接Linux上时遇到一些问题 xff0c 记录如下 第一步 xff0c 我们要在在linux上安装openssh server服务 xff0c 并确认打开了22监听端口 在linux上操作命令如下 xff1a apt
  • Linux下添加虚拟串口,接收和发送数据

    之前写的那虚拟串口有点问题 xff0c 只能读取 xff0c 不能接收 今天再来改一下 将python的内容改为如下 xff1a 先新建一个文档 xff0c 内容如下 usr bin env python coding 61 utf 8 i
  • fatal: The remote end hung up unexpectedly解决办法

    今天在写完代码后 xff0c 准备提交到GitHub上 xff0c 结果得到了下面的结果 xff0c 记录一下 百度了之后 xff0c 发现大部分是有两种说法 一种是说提交的文件太大 xff0c 解决办法如下 link 一种是说管理员将项目
  • 简单了解几种常见的网络通信协议

    常见的网络协议有 TCP IP协议 UDP协议 HTTP协议 FTP协议 Telnet协议 SMTP协议 NFS协议等 这里主要简述一下前三种协议 一 TCP IP协议 1 什么是TCP IP协议 xff1f TCP IP传输协议 xff0
  • 路径规划算法总结

    路径规划算法 1 Dijkstra算法 从物体所在的初始点开始 xff0c 访问图中的结点 迭代检查 待检查节点集中的节点 xff0c 该节点从初始节点向外扩展 xff0c 直到达到目标节点 xff0c 该算法能够保证找到一条从初始点到目标
  • chmod +x 与chmod 777 的超详细解说

    在linux中使用man命令查看chmod的大纲我们可以得出以下有用的信息 xff1a chmod OPTION MODE MODE FILE chmod OPTION OCTAL MODE FILE chmod OPTION refere
  • 无线路由模块有什么作用?MT76X8系列方案在工业物联网模块中的应用

    说起WiFi路由模块 xff0c 或许有像小编在接触物联网之前一样 xff0c 会想到这是用在路由器产品上的 xff0c 是上网用的 小编在加入bojingnet后 xff0c 接触到物联网WiFi方案定制的各种知识耳濡目染 xff0c 也
  • (深蓝学院)多传感器融合定位作业1

    1 作业描述 请搭好代码环境 xff0c 下载数据集并播放数据集 xff0c 在 rviz 上显示点云 2 数据集下载 Kitti 数据集 xff08 bag xff09 3 实现步骤 3 1 环境搭建 VirtualBox 虚拟机安装 U
  • SLAM--intel realsense2在ORB SLAM2 和 ORB SLAM3下建图和重定位(ubuntu 20.04, opencv 4.2.0 以上)

    用intel 的realsense相机实现orb slam2 和 orb slam3 ubuntu 20 04系统 链接地址 ORB SLAM2 可建图 xff0c github https github com zouyuelin ORB
  • QGC常见故障处理思路图

  • JAVA语言使用的前提,JDK安装,环境变量配置以及简单使用(带图解)。

    JAVA语言使用的前提 xff0c JDK安装 xff0c 环境变量配置以及简单使用 xff08 带图解 xff09 想要使用java语言 xff0c 肯定要先给自己的电脑上安装一个Java语言的翻译官 1 首先我们要下载JDK xff08
  • eclipse工具下载与安装(带图片)

    eclipse工具下载与安装 eclipse官网下载 直接上图 1 1 1 2 1 3 1 4 1 5 1 6 2 1 下载完之后解压到D盘的文件夹中即可 xff0c 解压完成后找到eclipse exe 应用程序 双击运行 2 2 选择文
  • Collection集合(集合概念的简单理解及数据结构的简单理解)

    Collection集合 xff08 简单理解 xff09 Collection接口 xff1a 是单列集合最顶层的接口 定义了所有单列集合中的共性方法 xff0c 但是里面没有带索引 xff08 下标 xff09 的方法 List 接口
  • js导航制作(纯js,带有隐藏和显示的滑动效果)

    简介 xff1a 纯js制作导航 xff0c 此导航只需要关系 appendHtml arrays bigNavi 0 navigationArr 函数的使用即可 下面代码粘贴到本地即可使用 HTML span class token op
  • 如何使用用户标签解析?

    什么是用户标签 xff1f 标签是认为规定的特征符号 xff0c 是将用户的属性 行为等进行高度提炼的特征描述 xff0c 比如按照年龄划分为90后 xff0c 按照性别有男女之分等 每个标签都是用户画像的一个角度 xff0c 大量的标签数

随机推荐

  • 手机中的功耗设计介绍(一)

    最近在找新工作 xff0c 对某大厂的功耗工程师的职位比较感兴趣 于是整理一下网络上查到的和之前基带工作中与功耗相关的知识 不同的公司可能会有不同的责任划分 xff0c 上份工作 xff0c 硬件部分的功耗是由基带负责 主要接触到的是整机的
  • 树莓派原生系统安装ROS(含网络代理,ROS编译安装以及ROS小车制作过程)

    本文将自主搭建树莓派ROS自主导航小车 目前已经完成的有 xff1a 1 树莓派初始化配置 2 树莓派局域网网络代理 3 树莓派ros安装 4 hector slam安装 5 自制阿克曼底盘控制 python 以下为全文链接 xff1a 树
  • 阿里云服务器修改主机名即ID(登陆时root@后显示名)【图文】详细

    首先你得在你电脑安装Xshell这一类的终端模拟软件去登陆你的远程阿里云服务器 我用的是Xshell xff0c 觉得界面超级清爽好看 xff0c 免费下载安装地址 https blog csdn net qq 43012792 artic
  • 虚拟机VMware和Ubuntu的安装与配置教程(超详细,实验可行)

    网上各类教程很多 xff0c 但总有缺漏的地方 在这里我参考了一个比较详细的教程 xff0c 并针对我第一次安装时遇到的问题 xff0c 对该教程进行补充 xff08 主要在安装源的部分及其他细节 xff09 文章目录 一 安装虚拟机和Ub
  • 【Pytorch图像分类】搭建卷积神经网络(CNN)和使用迁移学习(Transfer Learning)实现图片识别

    1 摘要 图像分类 xff0c 也可以称作图像识别 xff0c 顾名思义 xff0c 就是辨别图像中的物体属于什么类别 核心是从给定的分类集合中给图像分配一个标签的任务 实际上 xff0c 这意味着我们的任务是分析一个输入图像并返回一个将图
  • 基于STM32F407四旋翼无人机(一)

    第一次写博客 xff0c 可能有很多地方写的不好 xff0c 请大家见谅 xff0c 这次想分享一下毕业做的一个毕业设计 基于STM32F407四旋翼无人机控制系统 的一些过程 我会最开始的模块程序编写来较为详细的讲解 刚开始先说一下飞控都
  • 关于线性卡尔曼滤波详细讲解(二)--GPS融合IMU数据

    上次我们说了卡尔曼最核心的五个公式 xff0c 还有一些上次没有说的东西 xff0c 这次也补全 xff0c 其实在我们实际需求中 xff0c 只知道这五个公式 xff0c 却不知道怎么去根据自己的需求去初始化各种状态转移矩阵之类的 xff
  • 基于STM32F407四旋翼无人机---MS5611气压计(三)

    基于STM32F407四旋翼无人机 MS5611气压计 xff08 三 xff09 1 关于MS5611的基本介绍2 通过IIC获取气压计数据3 转化为相对高度 1 关于MS5611的基本介绍 2 通过IIC获取气压计数据 3 转化为相对高
  • mavlink协议从入门到放弃(一)

    mavlink协议从入门到放弃 xff08 一 xff09 什么是MAVLINK协议网站和参考资料MAVLINK简介 MAVLINK协议包结构协议结构mavlink协议解析 最近比较忙 xff0c 搞了个项目用到了mavlink协议 xff
  • VSCode如何上传代码到git

    VSCode新建分支方式 先看一下结构 这里是一个改动后上传git时的目录 xff1a 修改代码放入暂更改区 结果如下图 此时 xff1a 更改 下面修改的内容已经移到了 暂存的更改 下面 代码Commit 代码推送到远程分支 注意 xff
  • C++中运算符重载需要遵循的规则

    一 C 43 43 中运算符重载需要遵循的规则 1 并不是所有的运算符都可以重载 能够重载的运算符包括 xff1a 43 amp 61 lt gt 43 61 61 61 61 61 61 amp 61 61 lt lt gt gt lt
  • novnc+vncserver访问docker容器桌面

    https blog csdn net u012829611 article details 72576493 utm medium 61 distribute pc relevant t0 none task blog BlogComme
  • Apache阶段二-

    一 Apache 主要配置文件注释 Apache的主配置文件 xff1a etc httpd conf httpd conf 默认站点主目录 xff1a var www html Apache服务器的配置信息全部存储在主配置文件 etc h
  • FreeRTOS基本教程零:STM32 FReeRTOS 移植流程

    一 资料准备 FreeRTOS源码下载地址 xff1a https github com FreeRTOS FreeRTOS https github com FreeRTOS FreeRTOS 我移植的是FreeRTOSv9 0 0 st
  • ROS自学实践(4):使用GAZEBO进行物理仿真

    rviz中的仿真只是视觉上的仿真 xff0c 不能称得上物理仿真 xff0c gazebo是真正意义上的三维物理仿真平台 xff0c 可以在里面创建环境等相关信息 xff0c 方便以后的建模和导航 1 向xacro模型文件中添加惯性矩阵和碰
  • ROS自学实践(5):GAZEBO建模及添加相机和激光雷达传感器并进行仿真

    在搭建完机器人小车的模型之后 xff0c 需要向其添加传感器 xff0c 以便提取传感器的数据 xff0c 进行后续的工作 一 相机 1 添加camera gazebo xacro文件 同添加机器人模型一样 xff0c 添加一个相机也需要进
  • 使用CSS禁用链接

    想要使用CSS禁用链接 xff0c 可以使用pointer events属性 xff0c 该属性设置在单击元素时页面中的元素是否必须响应 下面本篇文章就来给大家介绍一下pointer events属性 xff0c 希望对大家有所帮助 CSS
  • 使用CSS将文字显示在水平线中间

    如何使用CSS将文字显示在水平线中间 xff1f 下面本篇文章就来给大家介绍使用CSS实现文字显示在水平线中间效果的方法 xff0c 希望对大家有所帮助 CSS提供了在网页中间制作包含文字或图像的水平线以使其具有吸引力的功能 xff0c 这
  • 使用CSS使文本输入不可编辑

    在HTML中可以使用readonly属性创建不可编辑的文本输入 而在CSS的情况下 xff0c 可以使用pointer events属性使文本输入不可编辑 下面本篇文章就来给大家介绍一下 xff0c 希望对大家有所帮助 CSS pointe
  • 将数组转换为JSON数据

    如何将数组转换为JSON数据 xff1f 下面本篇就来给大家介绍一下将数组转换为JSON对象的方法 xff0c 希望对大家有所帮助 方法一 xff1a 使用Object assign Object assign 方法将枚举的所有属性的值从源