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: ...
随机推荐
- MySQL 下载,安装,配置windows 服务
本次使用的是压缩包的方式是可以纯手动自己折腾各种配置... ok,闲话少叙,我们准备发车... 一.先要去mysql官网去下载压缩包咯 ①下载地址:https://dev.mysql.com/down ...
- 77、tensorflow手写识别基础版本
''' Created on 2017年4月20日 @author: weizhen ''' #手写识别 from tensorflow.examples.tutorials.mnist import ...
- Redis 5.0.7 讲解,单机、集群模式搭建
Redis 5.0.7 讲解,单机.集群模式搭建 一.Redis 介绍 不管你是从事 Python.Java.Go.PHP.Ruby等等... Redis都应该是一个比较熟悉的中间件.而大部分经常写业 ...
- Leetcode 跳跃游戏 II
题目链接:https://leetcode-cn.com/problems/jump-game-ii/ 题目大意: 略. 分析: 贪心 + DP. 代码如下: class Solution { pub ...
- 【LCT维护子树信息】uoj207 共价大爷游长沙
这道题思路方面就不多讲了,主要是通过这题学一下lct维护子树信息. lct某节点u的子树信息由其重链的一棵splay上信息和若干轻儿子子树信息合并而成. splay是有子树结构的,可以在rotate, ...
- Ubuntu16.04搜狗拼音输入法候选栏无法显示中文(英文乱码)
输入中文时,若候选栏显示英文乱码.无法显示中文,如下图所示,可按如下方式处理: cd ~/.config rm -rf SogouPY* sogou* 然后注销重新登录即可.
- Haproxy+ssl+nvm+forever
1 nvm介绍 NVM(Node version manager)顾名思义,就是Node.js的版本管理软件,可以轻松的在Node.js各个版本间切换,项目源码在GitHub: #安装git客户端 [ ...
- Java方法覆盖教程
重新定义来自超类(父类)继承的类中的实例方法称为方法覆盖. 示例 现在来看看,类A和类B的以下声明,覆盖了 print() 方法 : 1 2 3 4 5 6 7 8 9 10 11 public cl ...
- Spring入门之生命周期
好几日没有读东西了,今天本来要读mybatis原理部分,但是看到作者讲,只是学会用不用学那么深,遂直接开干spring,工作中一直用springboot,框架都是领导搭好的,每天的任务就是增删改查,挺 ...
- 面试题: nodejs 的事件轮询机制
setTimeout(function(){ console.log('setTimeout()执行了') },0) setImmediate(function(){ console.log('set ...