仅从Json数组输出一定数量的行到HTML表

时间:2017-03-16 17:26:18

标签: javascript php html mysql json

这可能很难解释,我会尽我所能。

我有两个数据库。一个有国名,一个有运动员姓名。 这两个表由属性ISO_id链接,这是国家ID(即FRA,JPN,USA等等)

我使用以下SQL语句加入这两个表:

$sql="SELECT Cyclist.name, Country.ISO_id, Country.total, Country.gold, Country.silver, Country.bronze, Country.country_name 
FROM Country JOIN Cyclist ON Country.ISO_id=Cyclist.ISO_id 
WHERE Country.ISO_id = 'JPN' OR Country.ISO_id = 'USA' ";

我想要打印一个只有两行的表,一行用于USA,一行用于日本,仅显示国家属性。我稍后需要使用cyclist属性创建一个表格,通过点击按钮显示一个国家/地区的所有自行车手。

问题是,在打印国家/地区的属性时,它们会被放入HTML表格中,与一个国家/地区的运动员一样多。如果美国有15名运动员,则国家表格将显示美国国家属性的15倍。

我该如何解决这个问题?

我的js代码:

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.4.3/jquery.min.js"></script>
<script type="text/javascript">
    var textArr='<?php echo $rowsArr?>';  // php write into javascript, as jsontext 
    $(document).ready(function(){ 
        var jsonArr = JSON.parse(textArr); //make jsontext into json array
        var tr;
        for(var i = 0; i < jsonArr.length; i++) { //there will be more countries, so i cant hardcode 2 as the loop end
            tr = $('<tr/>');
            tr.append("<td>" + jsonArr[i].country_name + "</td>");
            tr.append("<td>" + jsonArr[i].ISO_id + "</td>");
            tr.append("<td>" + jsonArr[i].gold + "</td>");
            tr.append("<td>" + jsonArr[i].silver + "</td>");
            tr.append("<td>" + jsonArr[i].bronze + "</td>");
            tr.append("<td>" + jsonArr[i].total + "</td>");
            $('table').append(tr);//appending to html table

        }
    });
</script>

我的HTML代码

<table style="border: 1px solid black">
                <tr>
                    <th>Country name</th>
                    <th>Country ID</th>
                    <th>Gold Medals</th>
                    <th>Silver Medals</th>
                    <th>Bronze Medals</th>
                    <th>Total Medals</th>
                </tr>           
            </table>

4 个答案:

答案 0 :(得分:1)

鉴于Country表已经包含每个国家赢得的每种类型的奖牌数量,我认为没有理由将该表加入骑自行车者。

此时,正如你所说,你的JOIN会重复一个国家的每个骑行者的总奖牌。

您的查询应该是:

 SELECT 
     Country.ISO_id, 
     Country.total, 
     Country.gold, 
     Country.silver, 
     Country.bronze, 
     Country.country_name 
FROM Country 
WHERE Country.ISO_id = 'JPN' OR Country.ISO_id = 'USA'  

你的桌子上不应该有一个骑自行车者名字的栏目。

   for(var i = 0; i < jsonArr.length; i++) { 
        tr = $('<tr/>');
        tr.append("<td>" + jsonArr[i].country_name + "</td>");
        tr.append("<td>" + jsonArr[i].ISO_id + "</td>");
        tr.append("<td>" + jsonArr[i].gold + "</td>");
        tr.append("<td>" + jsonArr[i].silver + "</td>");
        tr.append("<td>" + jsonArr[i].bronze + "</td>");
        tr.append("<td>" + jsonArr[i].total + "</td>");
        $('table').append(tr);//appending to html table
    }

(您还应该从表格标题中删除所述列:P)

    <table style="border: 1px solid black">
            <tr>
                <th>Country name</th>
                <th>Country ID</th>
                <th>Gold Medals</th>
                <th>Silver Medals</th>
                <th>Bronze Medals</th>
                <th>Total Medals</th>
                <th>Athlete Name</th>
            </tr>           
        </table>

答案 1 :(得分:0)

我认为你最好为你的问题编写两个不同的查询 - 向国家和其他运动员查询 - 因为它是国家的主要表格。

无论如何,尝试使用GROUP BY查询。

$sql="SELECT Cyclist.name, Country.ISO_id, Country.total, Country.gold, Country.silver, Country.bronze, Country.country_name 
FROM Country JOIN Cyclist ON Country.ISO_id=Cyclist.ISO_id 
WHERE Country.ISO_id = 'JPN' OR Country.ISO_id = 'USA' GROUP BY Country.ISO_id";

修改

哦,我忘了解释为什么程序两个查询。试想一下:你想要一个查询只给你两行,但也希望在此之后得到所有运动员的名字。我认为无法实现。你同意吗? 但是你可以通过以下方式获得所有与国家信息相关的运动员姓名:

$sql="SELECT Cyclist.name, Country.ISO_id, Country.total, Country.gold, Country.silver, Country.bronze, Country.country_name 
    FROM Cyclist LEFT JOIN Country ON Country.ISO_id=Cyclist.ISO_id 
    WHERE Country.ISO_id = 'JPN' OR Country.ISO_id = 'USA'";

当然,这不会只有两行。

答案 2 :(得分:0)

一个简单的解决方案是,只测试您上次使用的国家/地区,然后对于每个重复的县,您只需输出表格中Country和ISO列的空单元格。

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.4.3/jquery.min.js"></script>
<script type="text/javascript">
    var textArr='<?php echo $rowsArr?>';  // php write into javascript, as jsontext 
    $(document).ready(function(){ 
        var jsonArr = JSON.parse(textArr); //make jsontext into json array
        var tr;
        var last_ctry = '';
        for(var i = 0; i < jsonArr.length; i++) { //there will be more countries, so i cant hardcode 2 as the loop end

            tr = $('<tr/>');
            if ( last_ctry != jsonArr[i].country_name ) {
                tr.append("<td>" + jsonArr[i].country_name + "</td>");
                tr.append("<td>" + jsonArr[i].ISO_id + "</td>");
                last_ctry = jsonArr[i].country_name;
            } else {
                tr.append("<td>&nbsp;</td>");
                tr.append("<td>&nbsp;</td>");
            }

            tr.append("<td>" + jsonArr[i].gold + "</td>");
            tr.append("<td>" + jsonArr[i].silver + "</td>");
            tr.append("<td>" + jsonArr[i].bronze + "</td>");
            tr.append("<td>" + jsonArr[i].total + "</td>");
            tr.append("<td>" + jsonArr[i].name + "</td>");
            $('table').append(tr);//appending to html table

        }
    });
</script>

答案 3 :(得分:0)

再次是我。我学到了更多,在再次阅读本主题后,我有一个更好的解决方案来解决你的问题。如果你真的想要获得这些名称,你需要使用MySQL函数GROUP_CONCAT(或其他类似的语言)。您的查询将是:

$sql="SELECT GROUP_CONCAT(Cyclist.name ORDER BY Cyclist.name ASC) AS `cyclist_names`, Country.ISO_id, Country.total, Country.gold, Country.silver, Country.bronze, Country.country_name 
FROM Country LEFT JOIN Cyclist ON Country.ISO_id=Cyclist.ISO_id 
WHERE Country.ISO_id = 'JPN' OR Country.ISO_id = 'USA' GROUP BY Country.ISO_id ";

您将在一个字符串上获得所有这些名称。要使用javascript获得该功能,您可以将此行放在Table Row工厂中的某个位置。

var names = jsonArr[i].names.split(','); // that will be an array

希望一切都很好。如果您确实找到了答案,请告诉我们,呵呵。