需求背景:javascript获取本地json数据,得到不同的名称和年龄,将这些年龄数据按照由小到大的顺序排序。

第一种:jsonp方式

本知识点参考https://blog.csdn.net/piano9425/article/details/104169137
jsonp是json with padding(将JSON数据作为填充内容)的缩写,它不属于Ajax请求,但它可以模拟Ajax请求。
核心:利用了script标签可以向非同源端的服务器发送请求的特性,加载完毕后,相当于把服务器返回的内容当作JavaScript代码执行。

HTML:

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>数组排序</title>
</head>
<body>
	<script src="./sort.js"></script>
	<script type="text/javascript" src="./sort.json"></script>
</body>
</html>

sort.js :

// 函数名和json文件中的对象名dataJson保持一致
function dataJson(data){
    let Arr = data.data;
	console.log(Arr);
	// console.log(Arr.length);
	let arr = Arr.map(v=>v.age);
	let sort = arr.sort(function(a,b){return a-b})

console.log(sort);

}

sort.json:

dataJson({
"data":[{
	name: 'a',
	age: '45'
}, {
	name: 'b',
	age: '67'
}, {
	name: 'c',
	age: '89'
}, {
	name: 'd',
	age: '13'
}, {
	name: 'e',
	age: '15'
}, {
	name: 'f',
	age: '36'
}, {
	name: 'g',
	age: '37'
}, {
	name: 'h',
	age: '65'
}, {
	name: 'i',
	age: '42'
}, {
	name: 'j',
	age: '19'
}, ]
})

效果图:


第二种:ajax方式(需要解决跨域)

<script>
        window.onload = function () {
            var url = "sort.json"
            var request = new XMLHttpRequest();//new一个xhr对象
            request.open("get", url);//调用xhr对象的open方法
            request.send(null);//send一些数据
            request.onload = function () {//对服务器的响应过程进行监听
                if (request.status == 200) {
                    var json = JSON.parse(request.responseText);
                    let Arr = json;
					// console.log(Arr);
					// console.log(Arr.length);
					let arr = Arr.map(v=>v.age);
					let sort = arr.sort(function(a,b){return a-b})
					console.log(sort);
                }
            }
        }
    </script>

您已经阅读00:00:00欢迎留言评论,喜欢的话就为作者点个赞或者赏颗糖吧! 分享