Zuweisen von JSON-Daten zu HTML-Zellen

Question

Ich habe eine Jquery-Funktion, die JSON-Formatzeichenfolge zurückgibt, und ich möchte die JSON-Daten HTML-Zellen zuweisen. Wie gehe ich bitte vor? Ich habe versucht, mit Json2HTML-Bibliothek, aber scheint nicht für mich arbeiten.

var jsonData: [{"PlayerName": xxx, "Site": yyy, "Score":zzz}, 
{"PlayerName": "aaa", "site": "yyy", "Score": "zzz"}, 
{"PlayerName": "aaa", "site": "yyy", "Score": "zzz"}, 
{"PlayerName": "aaa", "site": "yyy", "Score": "zzz"}, 
{"PlayerName": "aaa", "site": "yyy", "Score": "zzz"}] 

Default.aspx:

<div style="position: relative; top: 25px; height: 720px"> 
     <div style="position: relative; height: 720px; width: 710px;"> 
      <div class="TopScore" style="position: relative; left: 50px"> 
       <table class="table"> 
        <tr> 
         <td class="RankColumn">1</td> 
         <td class="PlayernameColumn"></td> 
         <td class="Site"></td> 
         <td class="Score"></td> 
        </tr> 
       </table> 
      </div> 
      <div class="ScoreBlueBackground" style="position: relative; top: 5px; left: 100px"> 
       <table class="table"> 
        <tr> 
         <td class="rankColumn">2</td> 
         <td class="playername"></td> 
         <td class="siteName"></td> 
         <td class="score"></td> 
        </tr> 
       </table> 
      </div> 
. 
. 
. 
. 
. 
. 
. 
      <div class="ScoreBlueBackground" style="position: relative; top: 5px; left: 100px"> 
       <table class="table"> 
        <tr> 
         <td class="rankColumn">20</td> 
         <td class="playername"></td> 
         <td class="siteName"></td> 
         <td class="score"></td> 
        </tr> 
       </table> 
      </div> 

Answer 1

Eine Möglichkeit, dies zu tun, ist möglicherweise mit jQuery, um Ihr DOM-Element dynamisch zu erstellen.

var jsonData = [ 
 
    {"PlayerName": "aaa", "Site": "s11", "Score": "100"}, 
 
    {"PlayerName": "bbb", "Site": "s12", "Score": "99"}, 
 
    {"PlayerName": "ccc", "Site": "s13", "Score": "34"}, 
 
    {"PlayerName": "ddd", "Site": "s14", "Score": "12"}, 
 
    {"PlayerName": "eee", "Site": "s15", "Score": "68"} 
 
]; 
 

 
var dom_top_score = $('<div class="TopScore"><div>'); 
 
var dom_score_blue_background = $('<div class="ScoreBlueBackground"></div>'); 
 

 
for(var i = 0; i < jsonData.length; i++){ 
 

 
    var player_name = jsonData[i].PlayerName; 
 
    var site = jsonData[i].Site; 
 
    var score = jsonData[i].Score; 
 
    var ranking = i + 1; 
 
    
 
    var parent_dom = null; 
 
    var dom_table = '<table class="table"><tr><td class="RankColumn">' + ranking + '</td><td class="PlayernameColumn">' + player_name + '</td><td class="Site">' + site + '</td><td class="Score">' + score + '</td></tr></table>'; 
 

 
    // TopScore 
 
    if(i == 0){ 
 
    parent_dom = dom_top_score.clone(); 
 
    } 
 
    // ScoreBlueBackground 
 
    else{ 
 
    parent_dom = dom_score_blue_background.clone(); 
 
    } 
 
    
 
    parent_dom.append(dom_table); 
 
    $('#GameRanking').append(parent_dom); 
 
}

td { 
 
    width: 90px; 
 
    padding: 5px; 
 
    text-align: center; 
 
} 
 

 
#GameRanking { 
 
    
 
} 
 

 
.FirstRow, .TopScore, .ScoreBlueBackground { 
 
    margin: 0 0 0 5px; 
 
} 
 

 
.TopScore { 
 
    color: #fff; 
 
    background: #b01f1f; 
 
} 
 

 
.ScoreBlueBackground { 
 
    color: #fff; 
 
    background: #054f90; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 

 
<div id="GameRanking" style="position: relative; top: 5px; height: 720px"> 
 
    <div class="FirstRow"> 
 
     <table class="table"> 
 
      <tr> 
 
       <td class="RankColumn">Rank</td> 
 
       <td class="PlayernameColumn">Player Name</td> 
 
       <td class="Site">Site</td> 
 
       <td class="Score">Score</td> 
 
      </tr> 
 
     </table> 
 
    </div> 
 
</div>

Answer 2

JSON2HTML funktioniert nicht den ganzen Weg Sie einfach Schleife durch Ihre json wollte und eine Tabelle erstellen, indem Sie JavaScript für Schleifen und andere notwendige Tabelle erstellen und anhängen Funktionen

Answer 3

Frage ist ein bisschen alt, aber JSON2HTML tut dies genau .. da es eine Client-Seite Template-Engine ist

Hier ist eine Transformation, wie Sie diese Arbeit machen kann

var transform = {"<>":"div","class":"ScoreBlueBackground","style":"position: relative; top: 5px; left: 100px","html":[ 
 
    {"<>":"table","class":"table","html":[ 
 
     {"<>":"tbody","html":[ 
 
      {"<>":"tr","html":[ 
 
       {"<>":"td","class":"rankColumn","html":function(obj,index){ 
 
\t \t \t return(index+1); \t 
 
\t \t }}, 
 
       {"<>":"td","class":"playername","html":"${PlayerName}"}, 
 
       {"<>":"td","class":"siteName","html":"${Site}"}, 
 
       {"<>":"td","class":"score","html":"${Score}"} 
 
       ]} 
 
      ]} 
 
     ]} 
 
    ]}; 
 

 
    
 
var jsonData = [{"PlayerName": "xxx", "Site": "yyy", "Score":"zzz"}, 
 
{"PlayerName": "aaa", "site": "yyy", "Score": "zzz"}, 
 
{"PlayerName": "aaa", "site": "yyy", "Score": "zzz"}, 
 
{"PlayerName": "aaa", "site": "yyy", "Score": "zzz"}, 
 
{"PlayerName": "aaa", "site": "yyy", "Score": "zzz"}]; 
 

 
$("#GameRanking").json2html(jsonData,transform);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 
<script src="https://cdnjs.cloudflare.com/ajax/libs/json2html/1.0.0/json2html.js"></script> 
 
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.json2html/1.0.0/jquery.json2html.js"></script> 
 
    
 

 
<div id="GameRanking" style="position: relative; top: 5px; height: 720px"> 
 
    <div class="FirstRow"> 
 
     <table class="table"> 
 
      <tr> 
 
       <td class="RankColumn">Rank</td> 
 
       <td class="PlayernameColumn">Player Name</td> 
 
       <td class="Site">Site</td> 
 
       <td class="Score">Score</td> 
 
      </tr> 
 
     </table> 
 
    </div> 
 
</div>