1.

2.JSON.parse() 方法用于将一个 JSON 字符串转换为对象。

    $("body").on("click","#analyze",function(){
$("#modal").modal("show");
var url = "chartData";
$.ajax({
header:{
Accept:"application/json; charset=utf-8"
},
method: 'get',
url: url,
success:function(data){
data = JSON.parse(data);
console.log(data);
var html1 = template("standard-lists",data);
$("#standard-answer").html(html1);
var html2 = template("studentanswer-lists",data);
$("#student-answer").html(html2);
}
})
});

3.循环,判断

<tbody id="student-answer">
<script type="text/html" id="studentanswer-lists">
{{each sourceAndVoiceMusicList as sa}}
{{if sa.noteIsTrue==false}}
<tr class="anerror">
{{/if}}
{{if sa.noteIsTrue==true}}
<tr>
{{/if}} <td>{{sa.voiceNoteName}}</td>
<td>{{sa.rectifyNote}}</td>
<td>{{sa.voicePitchToFreq}}</td>
<td>{{sa.voiceNoteLength}}</td>
{{if sa.noteIsTrue==true}}
<td><span class="answer-right"></span></td>
{{/if}}
{{if sa.noteIsTrue==false}}
<td><span class="answer-error"></span></td>
{{/if}}
{{if sa.lengthIstrue==false}}
<td><span class="answer-error"></span></td>
{{/if}}
{{if sa.lengthIstrue==true}}
<td><span class="answer-right"></span></td>
{{/if}} </tr> {{/each}}
</script>
</tbody>

4.没有循环的数据显示格式

<script type="text/html" id="cardinal-list">
<p>音符总数:{{noteCount }}</p>
<p>音高正确数:{{noteNo}}</p>
<p>音长正确数:{{lengthNo}}</p>
<p>音准正确数:{{trueNO}}</p>
<p>准确率:{{accuracy*100+"%"}}</p>
</script>

5.后台给的数据

{
"trueNO": 47.5,
"voiceMusicList": [
{
"rectifyNote": 12,
"pitchToFreq": 221,
"absoluteTime": 16976,
"noteLength": 228,
"sequenceNo": 45,
"noteName": "A4",
"noteIsTrue": true,
"noteNumber": 57,
"lengthIstrue": false
}
],
"sourceAndVoiceMusicList": [
{
"rectifyNote": 12,
"pitchToFreq": 263,
"voicePitchToFreq": 130,
"sequenceNo": 15,
"sourceNoteLength": 424,
"voiceNoteName": "C4",
"noteIsTrue": true,
"voiceNoteLength": 1008,
"sourceNoteName": "C5",
"virtualFreq": 131,
"lengthIstrue": true
},
{
"rectifyNote": 0,
"pitchToFreq": 221,
"voicePitchToFreq": 0,
"sequenceNo": 20,
"sourceNoteLength": 464,
"voiceNoteName": "",
"noteIsTrue": false,
"voiceNoteLength": 0,
"sourceNoteName": "A4",
"virtualFreq": 110,
"lengthIstrue": false
}
],
"noteNo": 57,
"noteCount": 76,
"accuracy": 0.625,
"sampleSpeed": 80,
"sourceMusicList": [
{
"pitchToFreq": 263,
"absoluteTime": 20288,
"noteLength": 424,
"sequenceNo": 15,
"noteName": "C5",
"noteNumber": 60,
"virtualFreq": 131
},
{
"pitchToFreq": 221,
"absoluteTime": 26744,
"noteLength": 464,
"sequenceNo": 20,
"noteName": "A4",
"noteNumber": 57,
"virtualFreq": 110
}
],
"lengthNo": 52,
"voiceSpeed": 80
}

arttemplate 后台返回的数据格式问题的更多相关文章

  1. boostrap table接收到后台返回的数据格式不一致的解决方法

    后台使用的分页插件是mybatis的PageHelper,返回数据格式如下: 而bootstrap table插件需要服务端返回的数据格式中含有"total"和"rows ...

  2. HttpServletResponse工具类和HttpServletRequest工具类,前台参数接收方式和后台返回(JSON)数据格式

    RequestUtils.java 操作类 package cn.utils; import org.apache.commons.lang3.StringUtils; import org.slf4 ...

  3. 后台返回的json数据,前台需要修改对象的键值名,重新修改数据格式

    //例如,后台返回的数据为: var json = { data: [   {value: 103.95, name: "法拉利"}, {value: 103.2, name: & ...

  4. ajax执行成功后,在success回调函数中把后台返回的list还原到html的table中

    需求描述:前台通过onclick触发ajax,到后台返回一个list(json格式的),把list插入到html的table中. 思路简介: ̄□ ̄|| 刚开始的时候,是没有思路的,就卡在了,怎么把 a ...

  5. ionic后台返回的数据是html模板的时候,解析html文件的方法:

    1.后台返回来的数据格式是: { "state":"100", "data":[ {"Content": "\ ...

  6. 前台如何处理后台返回的json数据

    后台返回的json数据格式: { "state": true, "data": { "id": 0, "name": & ...

  7. iOS 后台返回json解析出现的null的解决办法

    在后台返回值为Null为空时,我们代码没有判断时,程序就会崩溃.当时一直很疑惑是为啥,后来发现是数据问题,由于服务器的数据库中有些字段为空,然后以Json形式返回给客户端时就会出现这样的数据.当我们通 ...

  8. jQuery里$.post请求,后台返回结果为“json”格式,前台解析错误问题记录

    在JSP页面使用$.post请求后台返回json数据时,在最后 必须加上返回数据格式为json的才行.不然JSP页面解析会出错.

  9. iview 中table列 一列显示多个数据(后台返回数组显示在列内)

    一.首先出现的是比较复杂的一种情况(多个key) 1.首先页面显示效果如下 2.后台返回数据格式如下: 3.在iview中table的columns中的render函数: 4.具体代码 render: ...

随机推荐

  1. HTML-参考手册: 元素和有效 DOCTYPES

    ylbtech-HTML-参考手册: 元素和有效 DOCTYPES 1.返回顶部 1. HTML 元素和有效 DOCTYPES HTML 元素 - 有效 DOCTYPES 下面的表格列出了所有的 HT ...

  2. Python单元测试示例

    这是使用单元测试框架unittest进行的单元测试,并输出测试结果. 首先定义一个类,三个方法.第一个方法是判断两个字符串是否相等,第二个方法是判断结果为真:第三个方法也是判断两个字符串相等. 然后是 ...

  3. flask编程规范

    参考:http://dormousehole.readthedocs.org/en/latest/styleguide.html   Flask遵循的是Pocoo的编程规范,Pocoo遵守PEP8的规 ...

  4. MySQL高级学习笔记(四):索引优化分析

    文章目录 性能下降 SQL慢 执行时间长 等待时间长 查询语句写的烂 查询数据过多 关联了太多的表,太多join 没有利用到索引 单值 复合 服务器调优及各个参数设置(缓冲.线程数等)(不重要DBA的 ...

  5. 更改package.js后重新加载

    node --save可有省略掉手动修改package.json的步骤   当你为你的模块安装一个依赖模块时,正常情况下你得先安装他们(在模块根目录下npm install module-name), ...

  6. Web RTC录视频

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  7. 数据概览神器pandas_profiling

    安装: pip install pandas_profiling 用法如下: import pandas as pd import pandas_profiling df = pd.read_exce ...

  8. 使用pip 时报错 Fatal error in launcher: Unable to create process using '"D:\pytghon2.7\python.exe" "D:\python2.7\S

    无法创建使用pip.exe创建进程,说白了就是无法启动pip安装插件. 解决方法升级pip: python -m pip install -U pip  

  9. redis 入门之哈希

    hset 将哈希表 hash 中域 field 的值设置为 value .如果给定的哈希表并不存在, 那么一个新的哈希表将被创建并执行 HSET 操作.如果域 field 已经存在于哈希表中, 那么它 ...

  10. [JXOI2017]数列

    题目 一个不太一样的做法 当\(A_{i-1}=x\),称\(A_1\)到\(A_{i-2}\)中大于等于\(A_{i-1}\)的最小值\(R\)为上界,\(A_1\)到\(A_{i-2}\)中小于等 ...