创建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使用