Lenker nicht Vorlage richtig für JSON-Antwort

Question

Hallo bevöl Ich bilde http Mvc Controller-Aktion erhalten aufrufen, die JSON zurückgibt, wie unten:

[ 
    { 
     "PlanCode": "P001 ", 
     "PlanName": "Plan1 " 
    }, 
    { 
     "PlanCode": "P002$ ", 
     "PlanName": "Plan2$ " 
    }, 
    { 
     "PlanCode": "P003$ ", 
     "PlanName": "Plan3$ " 
    }, 
    { 
     "PlanCode": "P004$ ", 
     "PlanName": "Plan4$ " 
    }, 
    { 
     "PlanCode": "P005$ ", 
     "PlanName": "Plan5$ " 
    }, 
    { 
     "PlanCode": "P006$ ", 
     "PlanName": "Plan6$ " 
    }, 
    { 
     "PlanCode": "P007$ ", 
     "PlanName": "Plan7$ " 
    }, 
    { 
     "PlanCode": "P007$ ", 
     "PlanName": "Plan7$ " 
    }, 
    { 
     "PlanCode": "P008$ ", 
     "PlanName": "Plan8$ " 
    }, 
    { 
     "PlanCode": "P009$ ", 
     "PlanName": "Plan9$ " 
    } 
] 

handlbar Code verwenden, wie unten:

var PLAN_METHOD = { 

    handlerData: function (planJSON) { 

     var templateSource = $("#plan-template").html(); 

     template = Handlebars.compile(templateSource); 

      var context = planJSON; 
      plansHTML = template({planJSON:context}); 


     $('#plans-div').html(plansHTML); 

    }, 
    loadPlansData: function() { 

     $.get("http://localhost:41801/plan/getplans",null,this.handlerData) 

    } 
}; 

$(document).ready(function() { 

    PLAN_METHOD.loadPlansData(); 
}); 

Vorlage html ist wie folgt:

<div id="plans-div" > 
</div> 

<script id="plan-template" type="text/x-handlebars-template"> 
    <table > 
     <thead> 
      <tr> 
       <th>Plan Code</th> 
       <th>Plan Name</th> 

      </tr> 
     </thead> 
     <tbody> 
      {{#each Plans}} 
      <tr> 
       <td>{{this.PlanCode}}</td> 
       <td>{{this.PlanName}}</td> 
      </tr> 
      {{/each}} 
     </tbody> 
    </table> 
</script> 

Irgendwie wird "plagesHTML" im JavaScript-Code des Lenkers nicht popu mit JSON-Datumszeilen versehen. Bitte helfen Sie

Answer 1

Ihre Vorlage sucht nach einem Array in der Eigenschaft Plans der Daten. Aber Ihre Daten haben keine Plans Eigenschaft. Die Lösung ist einfach die richtigen Eigenschaftsnamen in der Vorlage Datenobjekt zu verwenden:

plansHTML = template({ Plans: context });