Question

我有一个JSON文件。我必须在这个文件中读取JSON文件，WinType是该字段中的两个值Nominated和Win。我必须将此值安排到表中，如1 = Win和0 = Nominated。但是有时候如果在json文件中找不到记录，我希望<td> </td>为空。所以我的表格显示如下

<html>
<body>
    <TABLE BORDER=2 BORDERCOLOR=RED> 
        <TR> 
            <TD>12 Years a Slave</TD>
            <TD>1</TD>
            <TD></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></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": 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": 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 groupByNominee = data.reduce(function(rv, x) {
            (rv[x['Nominee']] = rv[x['Nominee']] || []).push(x);
            return rv;
        }, {});

        $(Object.keys(groupByNominee).map((nom) => 
            `<TR>
                <TD>${nom}</TD>
                ${groupByNominee[nom].map((item)=>
                        `<TD>
                            ${(item.WinType==='Win')?1:0}
                        </TD>`
                    ).join('')
                }

            </TR>`
            ).join('')).appendTo('#Table');
    }
});

Answer 1

假设您刚刚可能缺少WinType属性，请尝试以下操作：

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

    success: function(data) {
        var groupByNominee = data.reduce(function(rv, x) {
            (rv[x['Nominee']] = rv[x['Nominee']] || []).push(x);
            return rv;
        }, {});

        $(Object.keys(groupByNominee).map((nom) => 
            `<TR>
                <TD>${nom}</TD>
                ${groupByNominee[nom].map((item)=>
                        `<TD>
                            ${(typeof(item.WinType) !== 'undefined' && item.WinType.length > 0) ? (item.WinType === 'Win' ? '1' : '0') : ''}
                        </TD>`
                    ).join('')
                }

            </TR>`
            ).join('')).appendTo('#Table');
    }
});

这应检查WinType属性是否存在，并且在检查它是否等于Win之前，它的长度（如果找到）大于0。

Answer 2

我想这就是你想要的：

Nominee            "ID":1   "ID":2  "ID":3
12 Years a Slave    1                 0
American Hustle     0         1      1
Captain Phillips              1      1

然后你需要一个参考组，例如[1,2,3] 这段代码只是为了显示缺少的部分，不优雅，但有效：

function (data){
  var groupByNominee=data.reduce(function(rv, x) {
     (rv[x['Nominee']] = rv[x['Nominee']] || []).push(x);
     return rv;
  }, {});
  var ids = [1,2,3];


   $(Object.keys(groupByNominee).map((nom)=>{
     var str = '<TR>';
     str += '<TD>'+    nom + '</TD>'

     var ids=[1,2,3]; //Need all IDs 
     var mid = ids.map((id)=>{ // then loop all ids to get the empty id displayed.
       var type = "";
       groupByNominee[nom].forEach((item)=>{
         if (item.ID == id){
           type = (item.WinType==='Win')?'1':'0' ;
         }
        });
        return '<td>'+type+'</td>';
     }).join('');
     str += mid;
     str += '</TR>';
    return str; 
   }
   ).join('')).appendTo('#Table');

}

如何使用JSON在表中显示空白记录？

2 个答案: