创建json数组与json数组渲染到HTML

json数组格式大家都不陌生，与python的字典一样，简而言之就是JS当中的数据类型，

那我们如何把数据类型展示出来，模拟数据库SQL语句查询方法获取数据

html：

//简单的DIv盒子包裹，命名ID
<div id="main"></div>

Js创建数组:

var data;
data={"Fruits": [{ "name":"苹果" ,"Price":9,"imgageurl":"https://image.maigoo.com/upload/images/20220812/09173189194_640x426.jpg" }, { "Price":"香蕉" , "age":5,"imgageurl":"https://image.maigoo.com/upload/images/20220812/09173189194_640x426.jpg" }, { "Price":"芒果" , "age":18,"imgageurl":"https://image.maigoo.com/upload/images/20220812/09173189194_640x426.jpg" }]}

使用json数组渲染到页面：

//取出 data的Fruits
var dataFruits=data.Fruits;
//获取到dataFruits的length（长度）
var Fruitslength=dataFruits.length();
//声明一个字符串容器 html
var html=''；
//for循环输出,字符长度从0开始，所以<=
function listdata(){for(var i=0;i<=Fruitslength;i++){html+="<span>水果名:"+dataFruits.name[i]+"</span>"+"<span>水果价格:"+dataFruits.Price[i]+"</span>"+"<img src="+dataFruits.imgageurl[i]+">"}//渲染到html盒子里面$("#main").html(html)
}

需要注意：

需引入 jQuery 文件，建议从网上下载到本地

(1) JS渲染到页面的时候，是字符串拼接的

。字符串与变量的拼接使用'字符串'+变量+'字符串' ，把每个标签当作字符串

上面例子：

"<img src=" +变量+ ">"

分成两组字符串中间是变量
字符串1："<img src=" +变量+ 字符串2:">"

(2)for循环输出的优势在于，你数据可以再Jons格式里面加，不需要写多余的div盒子，

用循环输出，后期维护简单，你只需加数据，整体样式统一改

事件处理：

点击事件，或者其他事件，声明一个class，用this方法使用；

CSS样式处理：

先建立好html盒子及样式，再拼接到JS字符串里面；

单独样式需要自己声明单独class使用

创建json数组与json数组渲染到HTML相关推荐

数组转json去除首尾引号_诞生于JavaScript,json的前世今生
诞生于JavaScript,json的前世今生 json含义在开始之前,问个问题,什么是json? a:我猜它应该是某一门高深的技术(语重心长) b:json这个词为啥谷歌翻译?是啥新词语嘛?是不是 ...
js form表单转json字符串，json数组转json字符串出现多余的双引号问题解决
功能介绍页面展示的是一个用户的基本信息,和该用户对应的几台车辆的信息,车辆的字段属性都一样.然后可以编辑这些信息,再保存到后台.那么就需要考虑将车辆信息转换为json数组类型的字符串 ...
处理 JSON null 和空数组及对象
描述了对 JSON 数据中使用的 null 和空数组及对象的处理. JSON 数据具有 null 和空数组及对象的概念.此部分说明其中每个概念如何映射到 null 和未设置的数据对象概念. Null ...
php数组转为js json,php如何将数组转为json数组,php数组转为js数组
php如何将数组转为json数组PHP如何将数组转换成json数组,php将数组转换成json数组的方法:首先,创建一个PHP样例文件:然后定义一个普通数组:最后,"JSON _ encod ...
java ajax json 解析json数组对象数组对象数组对象数组_ajax传递包含对象数组的json数据...
一个简单的demo.用户在前台页面表单输入数据表的信息,数据传递到后台,系统自动在后台创建数据库表(table)的功能. 作为简单demo,这里的表只有"表名","列名& ...
javascript数组——新建数组、访问数组、遍历数组的方法、数组对象的方法、冒泡排序算法、json的正反序列化
目录数组通过构造函数的三种方法字面量创建数组方式访问数组遍历数组的方法遍历:遍历就是把数组中的元素从头到尾都访问一次操作数组对象的方法删除和添加 delete与Vue.delete区别 ...
json 中关于json数组跟json对象的区别
JSON 是存储和交换文本信息的语法:JSON 文本格式在语法上与创建 JavaScript 对象的代码相同.由于这种相似性,无需解析器,JavaScript 程序能够使用内建的 eval() 函数, ...
JS笔记（四）数组，json对象，数据类型，if 判断，swich 判断,三目运算判断
一.数组数组按照顺序来存储数据,都是有序地排序起来的. 创建数组 //用逗号分开每一条储存的数据: var arr = [5,2,0,1,3,1,4];访问数组里面的内容 console.log(a ...
hive之Json解析(普通Json和Json数组)
一.数据准备现准备原始json数据(test.json)如下: {"movie":"1193","rate":"5", ...
php关联数组转json字符串,php数组转json字符串
推荐操作系统:windows7系统.PHP5.6.DELL G3电脑 1.方法说明 (1)创建数组,数组转换为json格式: (2)创建类,初始化是赋值,魔法方法将对象转换字符串格式,然后使用json ...

创建json数组与json数组渲染到HTML

创建json数组与json数组渲染到HTML相关推荐

最新文章

热门文章