Listed in a table from a json

Question

Listed in a table from a json

Navigation

#1 by (1 votes)

0

The idea is to press the button to show me the list of countries within a table like this image:

As it is the code when pressing the button it shows me everything in a single row but I have not been able to make the result show it to me in 5 rows.

var countries = '[{ "code": "CO", "name": "Colombia", "flag_url": "https://s3.amazonaws.com/makeitreal/co.gif" },' +
  '{ "code": "PE", "name": "Perú", "flag_url": "https://s3.amazonaws.com/makeitreal/pe.gif" },' +
  '{ "code": "EC", "name": "Ecuador", "flag_url": "https://s3.amazonaws.com/makeitreal/ec.gif" },' +
  '{ "code": "BO", "name": "Bolivia", "flag_url": "https://s3.amazonaws.com/makeitreal/bo.gif" }]';

$(".wrapper").on("click", function(){
	var response = $.parseJSON(countries);
	$(".wrapper").append("<table><tr><th>Code</th><th>Name</th><th>Flag</th></tr></table>")
    $.each(response, function(i, item) {
        var tr = $('<tr>').append(
        	$('<td>').text(item.code),
            $('<td>').text(item.name),
            $('<td><img src="'+ item.flag_url +'">')
        ); 
        $(".wrapper").append(tr)
        $(".wrapper button").hide()
    });
})

body {
  font-family: 'Helvetica Neue', Arial, sans-serif;
  font-size: 16px;
}
.wrapper {
  width: 400px;
  margin: 20px auto 0;
  text-align: center;
}
button {
  font-size: 16px;
  padding: 15px;
}
table { width: 100%; }
table th, table td { padding: 7px 5px; border-bottom: 1px solid #ccc; }

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Show Countries</title>
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <div class="wrapper">
    <button>Mostrar paises</button>
  </div>
   <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> 
  <script src="app.js"></script> 
</body>
</html>

javascript jquery

asked by Oscar Diaz 18.09.2017 в 16:16

source

1 answer

Font of letters for a Textview I reload the paina the stopPropagation ();

score 1 · Accepted Answer

The problem is that the header of the table (the th elements) are included in the table element but the rest of the rows are not.

You should add all rows to the same table:

var countries = '[{ "code": "CO", "name": "Colombia", "flag_url": "https://s3.amazonaws.com/makeitreal/co.gif" },' +
  '{ "code": "PE", "name": "Perú", "flag_url": "https://s3.amazonaws.com/makeitreal/pe.gif" },' +
  '{ "code": "EC", "name": "Ecuador", "flag_url": "https://s3.amazonaws.com/makeitreal/ec.gif" },' +
  '{ "code": "BO", "name": "Bolivia", "flag_url": "https://s3.amazonaws.com/makeitreal/bo.gif" }]';

$(".wrapper").on("click", function(){
	var response = $.parseJSON(countries);
  var $table = $('<table></table>');
	$table.append("<tr><th>Code</th><th>Name</th><th>Flag</th></tr>")
  $.each(response, function(i, item) {
      var tr = $('<tr>').append(
        $('<td>').text(item.code),
          $('<td>').text(item.name),
          $('<td><img src="'+ item.flag_url +'">')
      ); 
      $table.append(tr);
    });
    $(".wrapper").append($table)
    $(".wrapper button").hide()
})

body {
  font-family: 'Helvetica Neue', Arial, sans-serif;
  font-size: 16px;
}
.wrapper {
  width: 400px;
  margin: 20px auto 0;
  text-align: center;
}
button {
  font-size: 16px;
  padding: 15px;
}
table { width: 100%; }
table th, table td { padding: 7px 5px; border-bottom: 1px solid #ccc; }

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Show Countries</title>
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <div class="wrapper">
    <button>Mostrar paises</button>
  </div>
   <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> 
  <script src="app.js"></script> 
</body>
</html>