js 简单读取json格式的变量的简单例子

最新推荐文章于 2024-04-30 17:04:54 发布
最新推荐文章于 2024-04-30 17:04:54 发布
阅读量635 收藏
点赞数
分类专栏： 前端 文章标签： json javascript html
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Dueser/article/details/120799002
版权

json

let users = [
	{
		"name": "Bill",
		"sex": "1",
		"phone": "1377777777"
	},
	{
		"name": "Biaall",
		"sex": "1",
		"phone": "13464537564"
	},
	{
		"name": "Billgdsaf",
		"sex": "2",
		"phone": "13772345235"
	}
];

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

<table>
    <caption>table</caption>
    <tr>
        <th>name</th>
        <th>sex</th>
        <th>phone</th>
    </tr>
    <tr>
        <td><div class="name"></div></td>
        <td><div class="sex"></div></td>
        <td><div class="phone"></div></td>
    </tr>
    <tr>
        <td><div class="name"></div></td>
        <td><div class="sex"></div></td>
        <td><div class="phone"></div></td>
    </tr>
    <tr>
        <td><div class="name"></div></td>
        <td><div class="sex"></div></td>
        <td><div class="phone"></div></td>
    </tr>
</table>
<script>
	let users = [
		{
			"name": "Bill",
			"sex": "1",
			"phone": "1377777777"
		},
		{
			"name": "Biaall",
			"sex": "1",
			"phone": "13464537564"
		},
		{
			"name": "Billgdsaf",
			"sex": "2",
			"phone": "13772345235"
		}
	];

	let names = document.getElementsByClassName("name");
	let sexs = document.getElementsByClassName("sex");
	let phones = document.getElementsByClassName("phone");
	for (let i = 0; i < 3; i++) {
		names[i].innerText = users[i].name;
		sexs[i].innerText = users[i].sex;
		phones[i].innerText = users[i].phone;
	}
</script>
</body>
</html>
霜序0.2℃
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
关于json的键名为变量的问题
...
04-13 7713
今天做后台整合的时候，遇到一个对象的中key名为一个变量的问题： 看后台提供的参数格式 查询JSON实例: { condition:{ companyId: , // int, default is null firstName : , // string, default is null lastName
JavaScript中获取json所有的Key作为一个数组，并利用变量作为json对象的KEY，来获取属性值。
happy81997的博客
07-13 3703
JavaScript中将变量作为json对象的KEY，来获取属性值 场景描述 json对象要回去某个属性的值，一般都是根据键值key来获取，json.a="",但是有时候，需要动态的传键值Key来获取对应的属性值 实现方式： 1、获取json多有的key值，作为一个数组 var data={k:'aa',b:'aaa'}; var keyData=Object.keys(data) //keyData=['k','b'] 2、动态传变量作为key var data={k:'aa',b:'a
7.动态变量与JSON处理
aa_qq110的专栏
08-06 700
动态变量与JSON处理
JSONObject和JSONArray区别、用法及JS取值
weixin_41167961的博客
10-17 286
一、JSONObject和JSONArray的数据表示形式 JSONObject的数据是用 { } 来表示的， 例如： { "id" : "123", "courseID" : "huangt-test", "title" : "提交作业", "content" : null } 而JSONArray，顾名思义是由JSONObject构成的数组，用 [ { } ...
JavaScript获取json中有几个字段
weixin_45966674的博客
12-08 503
我们可以通过Object.keys将json转个数组来取长度。有些业务我们会通过json的key和value处理。这里我们就精准的拿到了data中有 2 字段。进而就延伸到了需要获取具体有几个字段的判断逻辑。
在JavaScript中JSON数组作为变量赋值
weixin_44380380的博客
04-11 1295
​ 在 JavaScript 中，如果你把一个 JSON 数组赋值给另一个变量，实际上是将该数组的引用（地址）赋值给了新变量，而不是复制整个数组。这意味着新变量和原数组实际上是同一个数组对象，它们的内容会相互影响，当你修改其中一个数组中的元素时，另外一个数组中对应的元素也会发生改变，因为它们实际上是同一个元素。3、如果你希望复制一个数组而不是共享引用，可以使用【slice() 】 方法或扩展运算符 【…这样，新数组和原数组就是两个独立的数组对象，它们的内容不再相互影响。
js中json的使用
ruler1112的博客
09-04 418
/** * 1.JSON是JavaScript对象表示法 * * 2.JSON中不存在变量,对于属性需要加双引号(必须是双引号),末尾不需要分号 * { * "name":[zhangsan,lisi], * "age":[12,13], * "fridends":{ * "zhangsan":"12", * "lisi":"13
【新梦想干货分享】Jmeter技能：Json数据中如何设置变量
newdreamtest的博客
12-13 2569
我有两个接口，A接口和B接口，B接口如下： 问题如何把{“tag”:{“name”:“123456”}}中name后面的值设置为变量，该变量是从A接口中提取出来的。 如果使用正则表达式或是json提取器，如： 提取出来的值直接在B接口中使用，比如：{“tag”:{“name”:"KaTeX parse error: Expected 'EOF', got '}' at position 10:...
js通过变量获得json数据
XPY567
11-20 2637
// 一个JSON数组 {  "s81664841290841200000":[                    {"number":0,"maxnumber":2}                              ],  "s516652423491597000":[                             {"number":1,"maxnu
JSON 格式数据的定义及操作
css_styles的博客
06-17 9305
JSON 是一种数据格式，而不是一种编程语言。JSON 格式的数据的三种表现形式，简单值、对象、数组。JavaScript 字符串与 JSON 字符串的最大区别在于， JSON 字符串必须使用双引号（单引号会导致语 法错误）。在 JSON 中，对象的属性必须加双引号，这是必需的。属性的值可以是简单值，也可以是复杂类型值。相关方法： 1. JSON.stringify(msg); —— 该方法将一
ASP.NET Core根据环境变量支持多个 appsettings.json配置文件
01-19
拿个最简单的例子来说，比如连接字符串这种东西，开发环境肯定不能连生产数据库。在之前的话，这种情况基本靠准备两个同名的配置文件来进行处理，然后你在本地就使用本地的配置文件，生产环境就使用生产环境的配置...
php 读写json文件及修改json的方法
12-18
实例如下所示： // 追加写入用户名下文件 $code="001";//动态数据 $json_string = file_get_contents("text.json");// 从文件中读取数据到PHP变量 $data = json_decode($json_string,true);// 把JSON字符...
Angular.js如何从PHP读取后台数据
01-21
以前的例子中，大多数情况都是将数据存放到模块的$scope变量中，或者直接利用ng-init定义初始化的数据。但是这些方法都只为了演示其他功能的效果。这次来学习一下如何将Angular和PHP相结合，从后台读取数据。 首先，...
简单留言板
10-26
简单留言板 Simple Guest Book == 开发环境:Win7 32bit + Eclipse for Javaweb Indigo 3.72 + tomcat6 + sqlite3 采用MVC模式开发 实现分发器DispatchServlet来对拦截所有*.xx(web.xml中配置)的请求,然后分发给不同...
jsroot:JavaScript 根
07-24
JavaScript 根JavaScript ROOT 在 Web 浏览器中... 可以从二进制和 JSON ROOT 文件中读取和显示数据。 JSROOT 为 THttpServer 类实现用户界面。链接项目网页： 文档JavaScript 根THttpServerJavaScript ROOT 更新例子
Node框架Express搭建服务器和API
qq_25953937的博客
04-25 189
Node框架Express搭建服务器和API
网页使用之如何返回json/xml
qq_64948664的博客
04-25 779
后端返回json数据给前端进行渲染的方式比较熟悉，至于返回html页面，返回xml的方式接触逐渐减少，来在项目中熟悉这一点。
一个好用的MQTT客户端软件
最新发布
易得者易失
04-30 357
MQTT客户端软件，用于MQTT调试，测试用。
Json（标题）
m0_74107946的博客
04-28 259
将结构体转变为Json的过程叫编组，编组是通过json.Marshal函数完成的。json的对象类型可以用于编码Go语言中的map类型和结构体。Go语言对这些标准格式和编码都有良好的支持。json可以表示字符串，数字，布尔值和对象。类似的还有XML,ASN.1。是和在编译阶段关联到该成员的。
js eval函数读取json
05-02
可以使用eval函数读取JSON数据，但是这种方式不够安全，因为它允许执行任意的JavaScript代码。更好的做法是使用JSON.parse()函数来解析JSON数据，这种方式更安全且更可靠。 下面是使用eval函数读取JSON的示例代码： ```javascript var jsonString = '{"name": "John", "age": 30, "city": "New York"}'; var jsonData = eval('(' + jsonString + ')'); ``` 在这个例子中，我们首先定义了一个包含JSON字符串的变量jsonString。然后使用eval函数将它转换成JavaScript对象。注意，我们在eval函数的参数中使用了圆括号，这是为了避免语法错误。 更好的做法是使用JSON.parse()函数，示例代码如下： ```javascript var jsonString = '{"name": "John", "age": 30, "city": "New York"}'; var jsonData = JSON.parse(jsonString); ``` 在这个例子中，我们使用JSON.parse()函数将JSON字符串转换成JavaScript对象。这种方式更安全，因为它只解析JSON数据，而不允许执行任意的JavaScript代码。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值