• 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
    }
  • 相关阅读:
    vue插件(还真是第一次接触)
    Vue父组件向子组件传值以及data和props的区别
    Vue v-bind与v-model的区别
    vue 异步渲染
    vue动态加载不同的组件(分内部和外部组件)
    vue自定义组件的递归
    作用域插槽模板迭代的次数,取决于组件内部独立slot的数量
    说说 Vue.js 中的 v-cloak 指令
    C语言 system
    C语言 有符号、无符号
  • 原文地址:https://www.cnblogs.com/linsx/p/7070778.html
Copyright © 2020-2023  润新知