dhanashri dhanashri - 4 months ago 6
jQuery Question

How to show record in table using JSON?

I have one JSON file. I have to read JSON file in this file WinType is field in that field two value Nominated and Win. I have to arrange this value into table as in

1 = Win
and
0 = Nominated
. So my table is shows as follows

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


My JSON file is:

[
{
"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"
}
]


I tried to but not working properly.

Tried code

$.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>');
});


Please suggest me how to solve this.

Answer

So you need to GROUP_BY your JSON data by Nominee BEFORE.

Fiddle :


Live DEMO :

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>


Explain :

  • Group data(array) by Nominee & save ouput in groupByNominee (object of arrays) :

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

    ---> groupByNominee will be ={'A':[ID:1,Nominee:'A',WinType:'W'},{ID:1,Nominee:'A',WinType:'N'}],'B':[{ID:2,Nominee:'B',WinType:'W'}]}

  • Loop through Nominee (groubByNominee) object & for each iteration

    • Build <TD>${Nominee}</TD>
    • Loop through Array of current Nominee and append <TD>WinType?0:1</TD>
    • Join all string. html="<TD>...<TD>...</TD>...</TD>"
    • Wrap this string by jQuery $(html) & append it to Table.
Comments