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
}