Draw Table Using HTML and JavaScript

Question

I am trying to populate a table with data from a JavaScript query. Currently, the problem I am running into is that no table is created, and consequently, no data is displayed. A working version of this method can be viewed here. Thanks!

    // Initializes Parse
    // Defines Parse Object Array
    var object = {};

    // Defines Data Query
    var query = new Parse.Query("_User");

    query.find({

    	success: function(results) {

    		// Creates Table in Document
    		var table = document.createElement("table");
    		var row = table.insertRow(0);

    		// Sets Table Attributes
    		table.setAttribute("border", "1");
    		table.setAttribute("width", "100%");

    		// Loops Through Query
    		for (var i = 0; i < results.length; i = i + 1) {

    			// Stores Results
    			var object = results[i];
    			var text = object.get("firstName") + " " + object.get("lastName");
    			var cell = row.insertCell(i);

    			cell.setAttribute("align", "center");
    			cell.appendChild(text);

    		}

    		document.getElementById("main").appendChild(table);

    	},

    	failure: function(error) {

    		alert("Something Went Wrong");

    	}

    });

<!DOCTYPE html>

<html>
    <body>
        <div id="main">
            <!-- Destination -->
        </div>
    </body>
</html>

First there was script anchors in the script, there is no need of that and it was making an error. I have corrected that in your snippet. — Gaël Barbin
– Gaël Barbin, Commented Mar 5, 2016 at 1:32
Parse is all working fine, I omitted it from the code so one couldn't mess with my app data. — Wakaan
– Wakaan, Commented Mar 5, 2016 at 5:28
My code is pretty much exactly the same as the working code that is linked which is why I am so confused — Wakaan
– Wakaan, Commented Mar 5, 2016 at 5:29
you can use the debugger of your browser to see where there is a problem. And some errors may be displayed is the dev console. — Gaël Barbin
– Gaël Barbin, Commented Mar 5, 2016 at 5:32

Community · Accepted Answer · 2017-05-23 12:15:31Z

0

You have some errors in your code:

object.get method does not exists, you can get properties with these ways:

object.propertyName or object["propertyName"]

JavaScript - Get object property from element data

you can not use appendChild to insert a text node, you can use textContent
errors are thrown on the console. if you had to use the debugger, put some breakpoints, you would have seen that problems.

https://developer.chrome.com/devtools/docs/javascript-debugging https://developer.mozilla.org/docs/Outils/Débogueur

var success= function(results) {

    		// Creates Table in Document
    		var table = document.createElement("table");
    		var row = table.insertRow(0);

    		// Sets Table Attributes
    		table.setAttribute("border", "1");
    		table.setAttribute("width", "100%");

    		// Loops Through Query
    		for (var i = 0; i < results.length; i = i + 1) {

    			// Stores Results
    			var object = results[i];
    			var text = object.firstName+ " " + object["lastName"];
    			var cell = row.insertCell(i);

    			cell.setAttribute("align", "center");
    			cell.textContent= text;

    		}

    		    
  document.getElementById("main").appendChild(table);

}

datas= [
 { firstName:"f1",lastName:"n1"},
 { firstName:"f2",lastName:"n2"},
 { firstName:"f3",lastName:"n3"},
 { firstName:"f4",lastName:"n4"},
];
  
success(datas);

<!DOCTYPE html>

<html>
    <body>
        <div id="main">
            <!-- Destination -->
        </div>
    </body>
</html>

edited May 23, 2017 at 12:15

CommunityBot

11 silver badge

answered Mar 5, 2016 at 8:36

Gaël Barbin

3,9463 gold badges32 silver badges53 bronze badges

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

1 Comment

Wakaan Over a year ago

Object.get method does exist through the Parse library. I figured it out by how the text was appended to the table. Thanks!

Wakaan · Accepted Answer · 2016-03-07 01:11:07Z

The problem was with how I appended the text. Instead of cell.appendChild(text);, it should have been cell.textContext = text;.

Here is the final code

// Initializes Parse (Purposely Omitted)


// Defines Parse Object Array
var object = {};

// Defines Data Query
var query = new Parse.Query("_User");

query.find ({

  success: function(results) {

    // Creates Table in Document
    var table = document.createElement("table");
    var row = table.insertRow(0);

    // Sets Table Attributes
    table.setAttribute("border", "1");
    table.setAttribute("width", "100%");

    // Loops Through Query
    for(var i = 0; i < results.length; i = i + 1) {

      // Stores Results
      var object = results[i];
      var text = object.get("firstName") + " " + object.get("lastName");
      var cell = row.insertCell(i);

      cell.setAttribute("align", "center");
      cell.textContent = text;

    }

  document.getElementById("main").appendChild(table);

  },

  failure: function(error) {

    alert("Something Went Wrong");

  }

});

Collectives™ on Stack Overflow

Draw Table Using HTML and JavaScript

2 Answers 2

1 Comment

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related