arttemplate 后台返回的数据格式问题
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 后台返回的数据格式问题的更多相关文章
- boostrap table接收到后台返回的数据格式不一致的解决方法
后台使用的分页插件是mybatis的PageHelper,返回数据格式如下: 而bootstrap table插件需要服务端返回的数据格式中含有"total"和"rows ...
- HttpServletResponse工具类和HttpServletRequest工具类,前台参数接收方式和后台返回(JSON)数据格式
RequestUtils.java 操作类 package cn.utils; import org.apache.commons.lang3.StringUtils; import org.slf4 ...
- 后台返回的json数据,前台需要修改对象的键值名,重新修改数据格式
//例如,后台返回的数据为: var json = { data: [ {value: 103.95, name: "法拉利"}, {value: 103.2, name: & ...
- ajax执行成功后,在success回调函数中把后台返回的list还原到html的table中
需求描述:前台通过onclick触发ajax,到后台返回一个list(json格式的),把list插入到html的table中. 思路简介: ̄□ ̄|| 刚开始的时候,是没有思路的,就卡在了,怎么把 a ...
- ionic后台返回的数据是html模板的时候,解析html文件的方法:
1.后台返回来的数据格式是: { "state":"100", "data":[ {"Content": "\ ...
- 前台如何处理后台返回的json数据
后台返回的json数据格式: { "state": true, "data": { "id": 0, "name": & ...
- iOS 后台返回json解析出现的null的解决办法
在后台返回值为Null为空时,我们代码没有判断时,程序就会崩溃.当时一直很疑惑是为啥,后来发现是数据问题,由于服务器的数据库中有些字段为空,然后以Json形式返回给客户端时就会出现这样的数据.当我们通 ...
- jQuery里$.post请求,后台返回结果为“json”格式,前台解析错误问题记录
在JSP页面使用$.post请求后台返回json数据时,在最后 必须加上返回数据格式为json的才行.不然JSP页面解析会出错.
- iview 中table列 一列显示多个数据(后台返回数组显示在列内)
一.首先出现的是比较复杂的一种情况(多个key) 1.首先页面显示效果如下 2.后台返回数据格式如下: 3.在iview中table的columns中的render函数: 4.具体代码 render: ...
随机推荐
- 如何查看red gate安装时的log
安装界面,点击左上角的log open log file C:\Users\clu\AppData\Local\Temp\{69EEB6B0-A9AD-4BD4-8231-92C992F1FF05}\ ...
- Linux v4l2编程(摄像头信息采集)
基于Linux3.4.2,自己做一点儿视频信息采集及网络传输的小实验,边做边学,一些基础知识同步整理..... 1. 定义 V4L2(Video For Linux Two) 是内核提供给应用程序访问 ...
- 【lua学习笔记】——在sublime中配置Lua运行环境
一.让Sublime可以运行lua脚本 打开sublime 选择tools-->Build System-->New Build System 在新出现的文件中输入如下内容: { &q ...
- HDU 6242 Geometry Problem(计算几何 + 随机化)
题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=6242 思路:当 n == 1 时 任取一点 p 作为圆心即可. n >= 2 && ...
- upc组队赛3 Iranian ChamPions Cup
Iranian ChamPions Cup 题目描述 The Iranian ChamPions Cup (ICPC), the most prestigious football league in ...
- Python List列表的操作说明
Python中List的N种操作,其简单程度令人叹为观止... C:\Users\rhys>python Python 2.7.14 (v2.7.14:84471935ed, Sep 16 20 ...
- mysql三种连接方式
sql四种连接方式demo: 表a 表b a.id与b.parent_id有关系 1.内连接:SELECT a.*,b.* from a INNER JOIN b ON a.id=b.parent_i ...
- Java类成员访问级别
类可以是public或default(或包级别).在本教程中主要介绍 public,private,protected 这几个访问级别修辞符的使用.类成员的访问级别确定程序的哪个区域可以访问它. 以下 ...
- shell编程:变量替换
定义变量:$ var_1="I love you, Do you love me" 输出变量:$ echo $var_1 打印结果:I love you, Do you love ...
- 《构建之法》IT行业的创新 读书笔记 WEEK 5
本周选读邹欣老师的<构建之法>第16章——IT行业的创新. 邹欣老师将本章话题分成五个部分来阐述:创新的迷思.创新的时机.创新的招数.魔方的创新.创新和作坊,博主认为时机和招数这两个部分在 ...