Creating table from json in javascript using jquery for any field

Question

I so far can view the json response. Now I wanted to convert them to tables. I am using the following code to parse data about weather of cities. I am trying to use the following code.

    <!DOCTYPE html>
<html>

<head>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
    <script>
        function goTo() {
            $.getJSON("http://api.openweathermap.org/data/2.5/weather?key=api&format=json&q=" + link_id.value, function(result, status, jqXHR) {
                    var myList = (jqXHR.responseText);
                    var columns = addAllColumnHeaders(myList);

                    for (var i = 0; i < myList.length; i++) {
                        var row$ = $('<tr/>');
                        for (var colIndex = 0; colIndex < columns.length; colIndex++) {
                            var cellValue = myList[i][columns[colIndex]];

                            if (cellValue == null) {
                                cellValue = "";
                            }

                            row$.append($('<td/>').html(cellValue));
                        }
                        $("#excelDataTable").append(row$);
                    }
                }
            );}


        function addAllColumnHeaders(myList) {
            var columnSet = [];
            var headerTr$ = $('<tr/>');

            for (var i = 0; i < myList.length; i++) {
                var rowHash = myList[i];
                for (var key in rowHash) {
                    if ($.inArray(key, columnSet) == -1) {
                        columnSet.push(key);
                        headerTr$.append($('<th/>').html(key));
                    }
                }
            }
            $("#excelDataTable").append(headerTr$);

            return columnSet;
        }
    </script>
</head>

<body>

    <h2> Search box </h2>
    <input type='text' id='link_id'>
    <input type='button' id='link' value='Search' onClick='goTo()'>
    <table id="excelDataTable" border="1" />

    <div></div>

</body>

</html>

I got the following result:

enter image description here

And in chrome, i can't even view that

first convert myList to a json object like this var jsonList = $.parseJSON(myList); and then iterate through the object and create your table — Sushil
– Sushil, Commented Jun 23, 2015 at 23:41
I get the following error in both cases: ReferenceError: goTo is not defined at HTMLInputElement.onclick (http://null.jsbin.com/runner:1:1874) — user4993723
– user4993723, Commented Jun 24, 2015 at 17:56
try putting the value of myList in the console and see how the JSON is received. the json value is completely different. they're all unique values. try going from there or use a jquery plugin — Sushil
– Sushil, Commented Jun 24, 2015 at 17:59

wolfhammer · Accepted Answer · 2015-06-24 21:38:22Z

1

The response I'm getting is an object not an array. Process the response as an object.

function goTo() {
  $.getJSON("http://api.openweathermap.org/data/2.5/weather?key=api&format=json&q=" + link_id.value, function(result, status, jqXHR) {
    var myList = (jqXHR.responseText);
    myList = JSON.parse(myList);
    console.log(myList);
    var keys = [];
    for (var key in myList) {
      keys.push(key);
    }
    addAllColumnHeaders(myList, keys);
    var row$ = $('<tr/>');
    
    for (var i = 0; i < keys.length; i++) {
      
      var key = keys[i];
      var cellValue = myList[key];

      if (cellValue == null) {
        cellValue = "";
      } else if (typeof cellValue == "object") {
        cellValue = JSON.stringify(cellValue);
      }

      row$.append($('<td/>').html(cellValue));
    }
    
    $("#excelDataTable").append(row$);
  });
}


function addAllColumnHeaders(myList, keys) {

  var columnSet = [];
  var headerTr$ = $('<tr/>');

  for (var i = 0; i < keys.length; i++) {
    var key = keys[i];
    headerTr$.append($('<th/>').html(key));
  }
  $("#excelDataTable").append(headerTr$);

  return columnSet;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<h2> Search box </h2>
<input type='text' id='link_id'>
<input type='button' id='link' value='Search' onClick='goTo()'>
<table id="excelDataTable" border="1" />

<div></div>

answered Jun 24, 2015 at 21:38

wolfhammer

2,6611 gold badge15 silver badges12 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

user4993723 Over a year ago

Hi, Everytime i run a new query a new table gets added instead. How might I clear the existing table?

wolfhammer Over a year ago

@DavidWalsh before addAllColumnHeaders clear the html with $("#excelDataTable").html("");

Collectives™ on Stack Overflow

Creating table from json in javascript using jquery for any field

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest