-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：

现场演示：

解释：

相关问题