JavaScript 动态数据处理_什么是js动态数据-优快云博客

本文链接：https://blog.youkuaiyun.com/qq_43645678/article/details/108371833

本文详细介绍了JSON数据的基本概念、数据类型、语法及常用操作方法，包括如何处理复杂的JSON对象。此外，通过DOM加载JSON对象，实现分页处理算法和分页显示，提供了实战练习，帮助读者掌握JavaScript动态获取和处理数据的技巧。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

JavaScript 动态数据处理

1. JSON 数据

1.1 JSON 是什么

JSON(JavaScript Object Notation) 是一种轻量级的数据交换格式
JSON 格式适用于服务器端和Javascript客户端交互
JSON 是基于纯文本的数据格式
浏览器的 JSON 插件使用
- JSONView
xml

<student>
	<name>tom</name>
	<age>20</age>
	<sex>男</sex>
</student>

json

{
   
	"student":{
   
		"name":"tom",
		"age":20,
		"sex":"男"
	}
}

1.2 JSON 数据的类型

数组类型

在这里插入图片描述

对象类型

在这里插入图片描述

1.3 JSON 的语法

JSON对象的创建

var student = {
   
	"name":"Tom",
	"age":"18",
	"sex":"男"
}

1.4 JSON 数据的常见操作方法

JSON 对象成员的访问
- 成员访问符 .
- 字符串键值访问

var product = {
   "pName":"IPhoneX","Price":"8000","Color":"red"}
// JSON 数据的访问方式比 xml 简便，是服务器和客户端数据交互的主要载体
alert('价格'+ product.Price) // 成员访问符方式
alert('价格'+ product["Price"]) // 键值字符串方式

JSON 数据的遍历

for(key in JSONobj）{
   
	console.log(JSONobj[key]);
}

1.5 复杂的 JSON 对象

var students ={
   
  "data": [ 
     {
   "name":"Tom","age":18,"sex":"男"},
     {
   "name":"Jack","age":22,"sex":"男"},
     {
   "name":"Mary","age":19,"sex":"女"},
  ]
}

1.6 获取 JSON 数据练习

根据提供的 json 数据，获取所有雅芳产品的总数

//  统计产品数量
var products = {
   
    "data": [
        {
   
            "type": "【非自营】",
            "imgPath": "http://p4.jmstatic.com/product/005/175/5175404_std/5175404_350_350.jpg",
            "title": "Dior迪奥香水小样套装Q版5ml*4 甜心+魅惑+真我浓香+真我淡香",
            "price": "115",
            "brand": "迪奥"
        },
        {
   
            "type": "【非自营】",
            "imgPath": "http://p4.jmstatic.com/product/005/121/5121684_std/5121684_350_350.jpg",
            "title": "Dior迪奥香水小样套装Q版 【白礼盒】(花漾+魅惑+真我5ml)",
            "price": "85",
            "brand": "迪奥"
        },
        {
   
            "type": "【自营】",
            "imgPath": "http://p3.jmstatic.com/product/004/012/4012938_std/4012938_350_350.jpg",
            "title": "迪奥小姐花漾淡香氛5ml",
            "price": "80",
            "brand": "迪奥"
        },
        {
   
            "type": "【自营】",
            "imgPath": "http://p3.jmstatic.com/product/004/012/4012938_std/4012938_350_350.jpg",
            "title": "克丽丝汀迪奥迪奥小姐花漾淡香水（又名淡香氛) 5ml",
            "price": "89",
            "brand": "迪奥"
        },
        ...
        ]  
}

var count = 0
for(key in products['data']){
   
    if(products['data'][key].brand == '雅芳') {
   
        count++
    }

}
alert('雅芳商品总数为:' + count)

2. JSON 数据的实战应用

2.1 DOM 加载 JSON 对象

JSON 和 DOM 结合完成页面内容的展示

在这里插入图片描述

<style media="screen">
  *{
     margin: 0;padding: 0;}
  
  ul{
     list-style: none;}
  
  li{
     
    width: 300px;
    height: 400px;
    border: 1px solid #ccc;
    padding: 10px;
    float: left;
    margin: 10px;
  }
  
  h4{
     color: #f00}
  
  img{
     width: 100%}
  
  p{
     font-weight: 700}
</style>

<script>
	var products = {
     
	    "data": [
	        {
     
	            "type": "【非自营】",
	            "imgPath": "http://p4.jmstatic.com/product/005/175/5175404_std/5175404_350_350.jpg",
	            "title": "Dior迪奥香水小样套装Q版5ml*4 甜心+魅惑+真我浓香+真我淡香",
	            "price": "115",
	            "brand": "迪奥"
	        },
	        {
     
	            "type": "【非自营】",
	            "imgPath": "http://p4.jmstatic.com/product/005/121/5121684_std/5121684_350_350.jpg",
	            "title": "Dior迪奥香水小样套装Q版 【白礼盒】(花漾+魅惑+真我5ml)",
	            "price": "85",
	            "brand": "迪奥"
	        },
	        {