Ad
How To Create HTML Button Based On Database Content?
Trying to learn handling database information and my mission has been to dynamically create buttons based on content from a database query.
My Javascript is as follows:
var Datastrore = require("nedb");
var db = new Datastrore({ filename: "macros.db" });
db.loadDatabase(function(err) {
db.find({}, function(err, docs) {
console.log(docs); //all docs
});
});
This puts out in console my db info:
0: {name: "asas", command: "asas", _id: "6L83tJLl7ks0iS0b"}
1: {name: "asas", command: "asas", _id: "9kXMI7DdJBWK0L1W"}
2: {name: "qw", command: "qw", _id: "UmOaMJxYjMNjcEQ0"}
Now I can't figure out how I can use this info to dynamically create buttons on my html page.
Ad
Answer
for (var doc in docs) {
var element = document.createElement("button");
//Assign different attributes to the element.
element.setAttribute("name", doc.name);
element.innerHTML = doc.name
element.setAttribute("id", doc._id);
//element.setAttribute("onclick", ); If you wish to add click event
//Append the element in page (in span).
document.body.appendChild(element);
}
Ad
source: stackoverflow.com
Related Questions
- → How to update data attribute on Ajax complete
- → October CMS - Radio Button Ajax Click Twice in a Row Causes Content to disappear
- → Octobercms Component Unique id (Twig & Javascript)
- → Passing a JS var from AJAX response to Twig
- → Laravel {!! Form::open() !!} doesn't work within AngularJS
- → DropzoneJS & Laravel - Output form validation errors
- → Import statement and Babel
- → Uncaught TypeError: Cannot read property '__SECRET_DOM_DO_NOT_USE_OR_YOU_WILL_BE_FIRED' of undefined
- → React-router: Passing props to children
- → ListView.DataSource looping data for React Native
- → Can't test submit handler in React component
- → React + Flux - How to avoid global variable
- → Webpack, React & Babel, not rendering DOM
Ad