zoukankan      html  css  js  c++  java
  • 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数据删除):

  • 相关阅读:
    Android中使用WebView, WebChromeClient和WebViewClient加载网页
    Android清除本地数据缓存代码案例
    暴雪hash算法
    C++ 指向类的指针
    Qt VS Tools 的Qt Option add 不上qt版本的问题
    Dom4j完整教程详解
    java中charAt()方法的使用
    Linux环境下C++调试的三板斧
    (转载)Markdown进阶(更改字体、颜色、大小,设置文字背景色,调整图片大小设置居中)
    关于回调函数的理解
  • 原文地址:https://www.cnblogs.com/softwarecrash/p/8688863.html
Copyright © 2011-2022 走看看