JavaScript处理JSON数据

因自己手上项目需求,要求处理JSON音乐数据。(由MIDI格式转JSON后处理)

基本思路,取出JSON中的必要数据,根据自己的需求通过JSON的基本格式构建字符串。

首先我的JSON文件:

代码:

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.js"></script>
</head>
<body>
	<div id="jsonTip"></div>	
	<input type="button" value="获取数据" id="btn"/>
<script type="text/javascript">
$(function (){
  $("#btn").click(function ()  {
      
      
    $.getJSON("./newjson1.json", function (data){   //newjson1.json是文件名
      var jsontip = $("#jsonTip");                  //获取div标签
      var countTime = 0;                            //总计时间
      var noteData = data["tracks"][1]["notes"];    //获取note节点
      var noteLength = noteData.length;             //获取note节点下音符的数量
      var avrageTime = 0;                           //平均时间
      var baseTime = 0;                             //基准时间
      var beatNumArray = new Array();               //存储每个note的节拍数
      jsontip.empty();                              //清空div中的数据
      console.log(noteData.length);
      for(var i = 0; i < noteLength; i++){
          countTime += noteData[i]["duration"];
      }
      avrageTime = countTime/noteLength;            //平均时间
      baseTime = avrageTime/16;                     //1/16拍为基准时间
      console.log(data["tracks"][1]["notes"]);
      
      
      
      for(var i = 0; i < noteLength; i++){
          var noteBeatNum = noteData[i]["duration"]/baseTime;
          if(noteBeatNum < 2.5)
                noteBeatNum = 0.125;// 1/8
              else if(noteBeatNum < 3.5)
                noteBeatNum = 0.1875;// 3/16
              else if(noteBeatNum < 5)
                noteBeatNum = 0.25;// 1/4
              else if(noteBeatNum < 7)
                noteBeatNum = 0.375;// 3/8
              else if(noteBeatNum < 10)
                noteBeatNum = 0.5;// 1/2
              else if(noteBeatNum < 14)
                noteBeatNum = 0.75;// 3/4
              else if(noteBeatNum < 20)
                noteBeatNum = 1;// 1/1
              else if(noteBeatNum < 28)
                noteBeatNum = 1.5;
              else if(noteBeatNum < 40)
                noteBeatNum = 2;
              else if(noteBeatNum < 56)
                noteBeatNum = 3;
              else
                noteBeatNum = 4;
            beatNumArray[i] = noteBeatNum;
      }
      
      
      //JSON数据必要头与尾包装
      var headData = '"beatTime":' + baseTime + ',' + "<br>"
              + '"perPartBeat": 4 ,' + "<br>"
              + '"note":[' + '<br>';
      var endData = ']';
      
      //console.log(headData+endData);
     
      for(var i = 0; i < noteLength; i++){
          headData += '{"midi":' + noteData[i]["midi"] + ',' + '<br>'
                + '"lyric":' + ',' + '<br>'
                + '"perNoteBeatNum":' + beatNumArray[i] + '},' + '<br>';
      }   
       jsontip.html(headData+endData);
    }); 
  });
});
</script>
</body>
</html>

结果(因为上图的JSON文件是我把冗余的JSON数据删除):

原文地址:https://www.cnblogs.com/softwarecrash/p/8688863.html