解析ajax返回的json数据

问题描述

       最近在开发一个音乐小网站的时候,因为返回的数据是多重数组对象(即数组里面嵌套数组),所以不知道如何解析api返回的json数据。返回的json数据格式如下：

json总体结构如下：

json详细结构如下：

       在花费了大代价以后，终于解决了，想总结如下：

解析方法

//处理与音乐列表相关的事件
function musicFun() {
	//异步请求音乐列表
	var result = [];
	$.ajax({
		url: "https://api.apiopen.top/musicRankings?type=1",
		type: "get",
		success: function(data) {
			//获取成功
			if (data.code == 200) {
				result = data.result;
				//获取成功,调用解析函数
				analyMusicResult(result);
			}
			//获取失败
			else {
				// console.log("数据获取出错");
				alert("获取数据出错,请检查领您的网络");
			}
		},
		error: function(data) {
			console.log(data);
			alert("获取数据出错,请检查领您的网络");
		}
	});
	//解析获取到的音乐列表数据
	function analyMusicResult(result) {
		// console.log(result);
		if (result.size <= 0) {
			console.log("数据获取出错");
		} else {
		//因为数组里面还有数组，所以要用两层循环遍历数组
			$.each(result, function(i, item) {
				$.each(item.content, function(step, content) {
					appendMusicList(content, step);
				});
			});
		}
	};
}

var _index = 0;
//将获取到的音乐数据添加到页面上
function appendMusicList(content, step) {
	var temp, link;
	//从0开始,第三项的时候追加一个空div
	if (step % 2 == 1 && step > 0) {
		temp = `<div class="clearfix visible-xs"></div>`;
	} else {
		temp = "";
	}
	link = content.songid;
	if (link == undefined) {
		link = content.song_id;
	}
	
	//替换原链接中的图片尺寸参数
	var pic_big = content.pic_big;
	if (pic_big != undefined) {
		pic_big = pic_big.replace("w_150,h_150", "w_300,h_450");
	} else {
		pic_big = content.pic.replace("300x300", "300x450");
	}
	//这里使用了一个es6的语法，`` （esc键盘下面那个符号），之前的string就可以换行
	var str =
		`<div class="col-xs-6 col-sm-4 col-md-3 col-lg-2">
					<div class="item">
						<div class="pos-rlt">
							<div class="item-overlay opacity r r-2x bg-black">
								<div class="text-info padder m-t-sm text-sm">
									<i class="fa fa-star"></i>
									<i class="fa fa-star"></i>
									<i class="fa fa-star"></i>
									<i class="fa fa-star-o text-muted"></i>
									<i class="fa fa-star-o text-muted"></i>
								</div>
								<div class="center text-center m-t-n">
									<a href="#" data-toggle="class">
										<i class="icon-control-play i-2x text"></i>
										<i class="icon-control-pause i-2x text-active"></i>
									</a>
								</div>
								<div class="bottom padder m-b-sm">
									<a href="#" class="pull-right active" data-toggle="class">
										<i class="fa fa-heart-o text"></i>
										<i class="fa fa-heart text-active text-danger"></i>
									</a>
									<a href="javascript:;" data-toggle="class isPlay">
									<span data-title="` +
		content.title + `" data-artist="` + content.author + `" 
									data-mp3="` + link + `" data-poster="` + pic_big +
		`" id="data` + _index +
		`"  style="display:  none;"></span>
										<i class="fa fa-plus-circle text"  οnclick="addMusic(` + _index +
		`);"></i>
										<i class="fa fa-check-circle text-active text-info"></i>
									</a>
								</div>
							</div>
							<a href="` +
		link + `">  <img src="` + pic_big + `" alt="` + content.title +
		`" class="r r-2x img-full">
							</a>
						</div>
						<div class="padder-v">
							<a href="http://music.163.com/song/media/outer/url?id=` +
		link + `.mp3" class="text-ellipsis">` + content.title +
		`</a>
							<a href="#" class="text-ellipsis text-xs text-muted">` + content.author +
		`</a>
						</div>
					</div>
		</div>`;
	_index++;
	// console.log(str);
	str = str + temp;
	$("#music_list").append(str);
}