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: ...
随机推荐
- Centos7安装部署SonarQube7.9.1教程
0.参考文档 LTS 7.9.1 新特性:https://www.sonarqube.org/sonarqube-7-9-lts/ JDK11 下载地址: 链接:https://pan.baidu.c ...
- JS-jQuery:百科
ylbtech-JS-jQuery:百科 jQuery是一个快速.简洁的JavaScript框架,是继Prototype之后又一个优秀的JavaScript代码库(或JavaScript框架).jQu ...
- 97、PageRank算法学习
最近由于.......你懂得,需要一些搜索方面的知识,于是乎我重新复习了一下上半年读的那本书<数学之美>Dr吴军老师写的. 感觉读完这种书还是写一下比较好,因为将来说不定就会忘记了. 接下 ...
- C语言博客作业02
2.1 一.请仔细阅读<提问的智慧>,用自己的话描述你的收获,并举例子说明应该如何提问. 答:1.提问是思考的另一种方式,一个好的提问能体现出我们在认真的,聪明的思考; 2.做什么事情都要 ...
- Java-技术专区-虚拟机系列-内存模型(JMM)
Java8内存模型—永久代(PermGen)和元空间(Metaspace) 一.JVM 内存模型 根据 JVM 规范,JVM 内存共分为虚拟机栈.堆.方法区.程序计数器.本地方法栈五个部 ...
- 【Elasticsearch 7 探索之路】(六)初识 Mapping
上一篇主要讲解什么是 URL Search 和 Request Body Search 的语法.本篇对 Mapping 的 Dynamic Mapping 以及手动创建 Mapping 进行讲解. 1 ...
- linux基础文件管理软硬链接
一.文件系统的基本结构 1.文件和目录被组成一个单根倒置树目录结构 2.文件系统从根目录下开始,用“/”表示 3.根文件系统(rootfs):root filesystem文件名区分大小写 4.以 . ...
- spring纯注解的account案例
dao层: package cn.mepu.dao.imp; import cn.mepu.dao.IAccountDao; import cn.mepu.domain.Account; import ...
- 读书笔记-----javascript基本数据类型
由于js基础差, 记性也不好,准备一边读书一边做记录,希望这样能加深一下记忆 /* 第一天 */ javascript 基本数据类型 js一共只有五种数据类型 Undefined, Nu ...
- java 文件读取写入
public class ReadFromFile { /** * 以字节为单位读取文件,常用于读二进制文件,如图片.声音.影像等文件. */ public static void readFileB ...