-1

我有一個JSON文件。我必須在這個文件中讀取JSON文件WinType是該字段中的兩個值指定的和贏。我必須在1 = Win和0 = Nominated中安排這個值。所以，我的表顯示如下如何使用JSON在表中顯示記錄？

<html> 
    <body> 
     <TABLE BORDER=2 BORDERCOLOR=RED> 
      <TR> 
       <TD>12 Years a Slave</TD> 
       <TD>1</TD> 
       <TD>1</TD> 
       <TD>0</TD> 
      </TR> 

      <TR> 
       <TD>American Hustle</TD> 
       <TD>0</TD> 
       <TD>0</TD> 
       <TD>1</TD> 
      </TR> 

      <TR> 
       <TD>Captain Phillips</TD> 
       <TD>0</TD> 
       <TD>0</TD> 
       <TD>1</TD> 
      </TR> 
     </TABLE> 
    </body> 
</html>

我的JSON文件是：

[ 
    { 
     "ID":1, "Nominee":"12 Years a Slave", "WinProbability":0.00, "WinType":"Win" 
    }, 
    { 
     "ID":2, "Nominee":"12 Years a Slave", "WinProbability":2.81, "WinType":"Win" 
    }, 
    { 
     "ID":3, "Nominee":"12 Years a Slave", "WinProbability":0.66, "WinType":"Nominated" 
    }, 
    { 
     "ID":1, "Nominee":"American Hustle", "WinProbability":1.62, "WinType":"Nominated" 
    }, 
    { 
     "ID":2, "Nominee":"American Hustle", "WinProbability":0.85, "WinType":"Win" 
    }, 
    { 
     "ID":3, "Nominee":"American Hustle", "WinProbability":0.07, "WinType":"Win" 
    }, 
    { 
     "ID":1, "Nominee":"Captain Phillips", "WinProbability":2.70, "WinType":"Nominated" 
    }, 
    { 
     "ID":2, "Nominee":"Captain Phillips", "WinProbability":0.00, "WinType":"Win" 
    }, 
    { 
     "ID":3, "Nominee":"Captain Phillips", "WinProbability":1.52, "WinType":"Win" 
    } 
]

我試過，但不能正常工作。

試過代碼

$.ajax({ 
    url: 'movie.json', 
    dataType:'json', 

    success:function(data) 
    { 
     var items=data; 
     var lookup={}; 
     var result=[]; 
     for(var item,i=0;item=items[i++];) 
     { 
      var movie=item.Nominee; 
      console.log(movie); 
      if(!(movie in lookup)) 
      { 
       lookup[movie]=1; 
       result.push(movie); 
      } 
     } 
     result.sort(); 
     console.log(result); 

     $("#table").click(function(){ 
      alert("Fasdfasd"); 
      var hii=0; 
      var goo=1; 

      for(var j=0;j<=result.length;j++) 
      { 
       $('#Table').append('<tr><td>'+result[j]+'<td>'); 
       for(var k=0;k<10;k++) 
       { 
        alert(items[k]['ID']); 
        alert(items[k]['Nominee']); 
        alert(items[k]['WinType']); 
        if(items[k]['Nominee']==result[j] && items[k]['WinType']=="Win") {  
         $('#Table').append('<td>'+hii+'</td>'); 
        } else { 
         $('#Table').append('<td>'+goo+'</td>'); 
        } 
       } 
       break; 
      } 
      $('#Table').append('</tr>'); 
     });

請建議我如何解決這個問題。

來源

2016-07-31 sandip kakade

*「我試過但不能正常工作」* - JS的位置在哪裏？當你運行它時究竟發生了什麼？ – nnnnnn

你應該用我們的javaScript來初始化json –

你的表的第一個沒有任何id'#table「，其次你聲明瞭不同的'＃table'和'＃Table'。 –

所以你需要GROUP_BY你的JSON數據Nominee之前。

Fiddle：

現場演示：

var data=[{"ID":1,"Nominee":"12 Years a Slave","WinProbability":0.00,"WinType":"Win"},{"ID":2,"Nominee":"12 Years a Slave","WinProbability":2.81,"WinType":"Win"},{"ID":3,"Nominee":"12 Years a Slave","WinProbability":0.66,"WinType":"Nominated"},{"ID":1,"Nominee":"American Hustle","WinProbability":1.62,"WinType":"Nominated"},{"ID":2,"Nominee":"American Hustle","WinProbability":0.85,"WinType":"Win"},{"ID":3,"Nominee":"American Hustle","WinProbability":0.07,"WinType":"Win"},{"ID":1,"Nominee":"Captain Phillips","WinProbability":2.70,"WinType":"Nominated"},{"ID":2,"Nominee":"Captain Phillips","WinProbability":0.00,"WinType":"Win"},{"ID":3,"Nominee":"Captain Phillips","WinProbability":1.52,"WinType":"Win"}]; 
 

 

 
var groupByNominee=data.reduce(function(rv, x) { 
 
    (rv[x['Nominee']] = rv[x['Nominee']] || []).push(x); 
 
    return rv; 
 
    }, {}); 
 
var html=Object.keys(groupByNominee).map((nom)=> 
 
      `<TR> 
 
        <TD>${nom}</TD> 
 
        ${groupByNominee[nom].map((item)=>`\t<TD>${(item.WinType==='Win')?1:0}</TD>`).join('\t\n')} 
 

 
       </TR>` 
 
    
 
      
 
    ).join('\n'); 
 

 
$(html).appendTo('#Table'); 
 
console.log(html); 
 
//console.log(groupByNominee);

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

解釋：

組data（陣列）由Nominee &保存輸出中在groupByNominee（陣列對象）：

--->如果data=[{ID:1,Nominee:'A',WinType:'W'},{ID:2,Nominee:'B',WinType:'W'},{ID:1,Nominee:'A',WinType:'N'}]

--->groupByNominee將={'A':[ID:1,Nominee:'A',WinType:'W'},{ID:1,Nominee:'A',WinType:'N'}],'B':[{ID:2,Nominee:'B',WinType:'W'}]}
循環通過Nominee（groubByNominee）對象&爲每個我teration
- 構建<TD>${Nominee}</TD>
- 遍歷當前提名的數組，並追加<TD>WinType?0:1</TD>
- 加入所有的字符串。 html="<TD>...<TD>...</TD>...</TD>"
- 用jQuery包裝這個字符串$(html) &將它附加到Table。

來源

2016-07-31 07:28:31

假設在我的JSON文件中第一個電影有3個記錄和第二個電影有1和3記錄和2記錄錯過，所以我想要2空白你能建議我該怎麼做 –

如何使用JSON在表中顯示記錄？

回答

Fiddle：

現場演示：

解釋：

相關問題