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

Question

This might be difficult to explain, I will try my best.

I have two databases. One with country names, and one with athlete names. These two tables are linked by the attribute ISO_id, which is the country ID (ie FRA, JPN, USA, etc...)

I am joining these two tables with the following SQL statement:

$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' ";

I want to print a table with only two rows, one for USA and one for Japan, showing only the country attributes. I will later need the cyclist attribute to create a table showing all cyclists in a country upon the click of a button.

The issue is that when printing out a country's attribute, they are put in the HTML table as many times as there are athletes in a country. If USA has 15 athletes, the country table will show 15 times the USA country attributes.

How can I solve this?

My js code:

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

My HTML code

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

Answer 1

Given the Country table already contains how many medals of each type has each country won, I see no reason to join that table with the Cyclist one.

At this moment, your JOIN has the effect of, as you said, repeating the total medals for each Cyclist a country has.

You query should instead be:

 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'  

And your table shouldn't have a column for the cyclist name anymore.

   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
    }

(and you should remove said column from the table headers as well :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>

Answer 2

I think it's better you program two distinct queries for your problem - a query to the countries and other to the athletes - because the main table it's for the Country.

Whatever, try to use the GROUP BY query.

$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";

EDIT

Oh, I forgot to explain why program two queries. Just think about this: you want a query to give you only two rows but also want to get all athletes names after this. I think it can't be achieved. Do you agree? But you can get all athletes names joined with countries infos with this:

$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'";

And, of course, that won't be only two rows.

Answer 3

A simple solution, is to just test what you last used as the country and then for each repeated county, you just output empty cells for the Country and ISO columns in your table.

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

Answer 4

it's me again. I learn a bit more and after read this topic again I have a better solution to your problem. If you really want to get those names, you'll need to use the MySQL function GROUP_CONCAT (or anything similar in other languages). Your query would be:

$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 ";

You'll get all those names on a single string. To get that with javascript, you'll put this line somewhere in the Table Row factory.

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

Hope everything is fine. If you actually found the answer, tell us, hehe.