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. 尚学linux课程---12、vim操作命令2

    尚学linux课程---12.vim操作命令2 一.总结 一句话总结: 要看不同的视频,每个视频的关键点都不一样,不如之间的的视频就没讲到vim中set nu是什么意思 学了的内容一定要练,不然真的是 ...

  2. php自带函数大全

    php自带函数大全 http://blog.csdn.net/hopewtc/article/details/6797326   Abs: 取得绝对值.Acos: 取得反余弦值.ada_afetch: ...

  3. python基础-包和模块

    Python基础-包与模块 写在前面 如非特别说明,下文均基于Python3 摘要 为重用以及更好的维护代码,Python使用了模块与包:一个Python文件就是一个模块,包是组织模块的特殊目录(包含 ...

  4. excel数据生成sql insert语句

    excel数据生成sql insert语句 excel表格中有A.B.C三列数据,希望导入到数据库users表中,对应的字段分别是name,sex,age . 在你的excel表格中增加一列,利用ex ...

  5. Spring 相关目录

    Spring 相关目录 学习笔记 Spring 学习笔记 IoC 基础 Spring 学习笔记 Resource 资源 Spring 学习笔记 数据绑定,校验,BeanWrapper 与属性编辑器 源 ...

  6. scala解析json —— json4s 解析json方法汇总

    使用json4s的框架,包括spark,flink 1.org.json4s 引入pom的方法 对于本地支持,引入以下依赖项添加到pom中 <dependency> <groupId ...

  7. Oracle查看有锁进程,删除锁

    查看锁表进程SQL语句1: select sess.sid,     sess.serial#,     lo.oracle_username,     lo.os_user_name,     ao ...

  8. 三、hibernate中持久化类的使用

    hibernate的持久化类 持久化:将内存中的一个对象持久化到数据库中的过程,hibernate就是一个用来进行持久化的框架 持久化类:一个Java对象与数据库中表建立了关系映射,那么这个类在hib ...

  9. Oracle中删表遇到ORA-14452

    删表的时候碰到表忙的情况,会报错. DROP TABLE TMP_TAB_T_AGENT * ERROR at line 1: ORA-14452: attempt to create, alter ...

  10. Android中XML的命名空间、自定义属性

    命名空间(namespace) XML 命名空间提供避免元素命名冲突的方法. 举个例子,A学校有名学生叫做林小明,B学校也有名学生叫林小明,那我们如何识别这两名拥有相同名字的同学呢?这时候命名空间就派 ...