[nodejs] Simple / graceful way to render returned db query data

[Patrick]

Hello. I'm new to Node.js (spent most my years using ColdFusion).

I have a basic Node.js / Express app that I have querying a database and
displaying that content successfully but it is super ugly and I want to
find another way to render the dynamic content more gracefully.

1. I have a route in my app.js file that simply makes a query and returns
the query

con.connect(function(err) {
if (err) throw err;
con.query("SELECT dataId,dataName FROM myData", function (err, result,
fields) {
if (err) throw err;
res.send(result);
});
});


2. I have an ajax function in the html file which works:

<script>
function getData(){
var xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
// the returned json data from a db query containing two columns
(dataId,dataName)
var contents = JSON.parse(this.responseText);
// create basic html table with header columns
var contents2 = "<table border=1><tr><td>Data Id</td><td>Data
Name</td></tr>";
// loop through json and add table rows for the returned data
for (i = 0; i < contents.length; i++){
contents2 = contents2 + '<tr><td>' + contents[i].dataId +
'</td><td>' + contents[i].dataName + '</td></tr>';
}
// end the html table
var contents2 = contents2 + "</table>";
// render the html table in the div with the id of myData
document.getElementById("myData").innerHTML = contents2;
}
};
xhttp.open("GET", "/get-data", true);
xhttp.send();
}
</script>

3. Then I just have a button that calls that ajax function later on that
page.

<button id="myButton" type="button" onClick="getData();">Get Some
Data</button>

<hr>

<h3>Some Data from my Database</h3>
<div id="myData"></div>


-------------------------------------

This all works but I would like to add more functionality (i.e. edit row
buttons, more db columns, etc) but there's gotta be a better way than to
dynamically build the html in the ajax function. I know there are lots of
front end UI frameworks but I am hoping for something basic for now. I'm
learning so many new things that I am hoping to not have to go down a
another major rabbit hole with that (yet).


Anyone have any thoughts on this? Thank You!

Patrick
--
Job board: http://jobs.nodejs.org/
New group rules: https://gist.github.com/othiym23/9886289#file-moderation-policy-md
Old group rules: https://github.com/joyent/node/wiki/Mailing-List-Posting-Guidelines
---
You received this message because you are subscribed to the Google Groups "nodejs" group.
To unsubscribe from this group and stop receiving emails from it, send an email to nodejs+***@googlegroups.com.
To post to this group, send email to ***@googlegroups.com.
To view this discussion on the web visit https://groups.google.com/d/msgid/nodejs/2a69c872-fb08-4a7a-9e0d-4c4532b8bef3%40googlegroups.com.
For more options, visit https://groups.google.com/d/optout.

[A]

There are many 3rd party tables\grids out there that auto mount JSON and
have the features you are looking for - i hate to recreate the wheel
http://datatables.net/
https://github.com/nhnent/tui.grid

Also, if you re using any css framework, ex: Boostrap, there are a few
choices for Bootstrap Tables that can bind JSON to the table automatically
(one line of code usually)

Post by Patrick
Hello. I'm new to Node.js (spent most my years using ColdFusion).
I have a basic Node.js / Express app that I have querying a database and
displaying that content successfully but it is super ugly and I want to
find another way to render the dynamic content more gracefully.
1. I have a route in my app.js file that simply makes a query and returns
the query
con.connect(function(err) {
if (err) throw err;
con.query("SELECT dataId,dataName FROM myData", function (err, result,
fields) {
if (err) throw err;
res.send(result);
});
});
<script>
function getData(){
var xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
// the returned json data from a db query containing two columns
(dataId,dataName)
var contents = JSON.parse(this.responseText);
// create basic html table with header columns
var contents2 = "<table border=1><tr><td>Data Id</td><td>Data
Name</td></tr>";
// loop through json and add table rows for the returned data
for (i = 0; i < contents.length; i++){
contents2 = contents2 + '<tr><td>' + contents[i].dataId +
'</td><td>' + contents[i].dataName + '</td></tr>';
}
// end the html table
var contents2 = contents2 + "</table>";
// render the html table in the div with the id of myData
document.getElementById("myData").innerHTML = contents2;
}
};
xhttp.open("GET", "/get-data", true);
xhttp.send();
}
</script>
3. Then I just have a button that calls that ajax function later on that
page.
<button id="myButton" type="button" onClick="getData();">Get Some
Data</button>
<hr>
<h3>Some Data from my Database</h3>
<div id="myData"></div>
-------------------------------------
This all works but I would like to add more functionality (i.e. edit row
buttons, more db columns, etc) but there's gotta be a better way than to
dynamically build the html in the ajax function. I know there are lots of
front end UI frameworks but I am hoping for something basic for now. I'm
learning so many new things that I am hoping to not have to go down a
another major rabbit hole with that (yet).
Anyone have any thoughts on this? Thank You!
Patrick

--
Job board: http://jobs.nodejs.org/
New group rules: https://gist.github.com/othiym23/9886289#file-moderation-policy-md
Old group rules: https://github.com/joyent/node/wiki/Mailing-List-Posting-Guidelines
---
You received this message because you are subscribed to the Google Groups "nodejs" group.
To unsubscribe from this group and stop receiving emails from it, send an email to nodejs+***@googlegroups.com.
To post to this group, send email to ***@googlegroups.com.
To view this discussion on the web visit https://groups.google.com/d/msgid/nodejs/6214e39c-675b-4172-bb30-18b3e5e6d4ec%40googlegroups.com.
For more options, visit https://groups.google.com/d/optout.