I'm trying to insert data MondoDB with AngularJS's $http service , but one of the variables and the array What is in the collection , What to do ?
nome: string.
autor: string.
genero: array.
info: string.
Collection: mangas.
db.mangas.insert({nome: 'toriko', autor:'test', genero:['Ação','Aventura'], info:'...'})
Server.Js, Find mangas.
app.get('/mangas', function(req, res){
console.log('i receive a get request')
db.mangas.find(function (err, mangas){
console.log(mangas);
res.json(mangas);
});
});
Server.Js, Insert mangas.
app.post('/mangas', function (req, res) {
console.log(req.body);
db.mangas.insert(req.body, function(err, doc) {
res.json(doc);
});
});
index.html, ng-click="addManga"
<tr>
<td><input class="form-control"manga.nome></td>
<td><input class="form-control"manga.autor></td>
<td><input class="form-control"manga.genero></td>
<td><input class="form-control"manga.info></td>
<td><button class="btn btn-primary" ng-click="addManga()">Add manga</button></td> ----adiciona o metodo que se encontra no controller
</tr>
<tr ng-repeat="manga in mangas">
<td>{{manga.nome}}</td>
<td>{{manga.autor}}</td>
<td>{{manga.genero}}</td>
<td>{{manga.info}}</td>
</tr>
Controller.js
$http.get('/mangas').success(function(response) {
console.log("eu recevi a data requisitada");
$scope.mangas = response;
});
$scope.addManga = function() {
console.log($scope.mangas);
$http.post('/mangas', $scope.mangas).success(function(response) {
console.log(response);
})};
In HTML:
you should use ng-model in html to bind with controller
Like:
<td><input class="form-control" ng-model="manga.nome"></td>
instead of
<td><input class="form-control"manga.nome></td>
and in controller:
you should use $scope.manga instead of $scope.mangas because of you bind manga in html input fields.
$scope.manga = {};
$scope.addManga = function() {
console.log($scope.manga);
$http.post('/mangas', $scope.manga).success(function(response) {
console.log(response);
})};
Related
I am attempting to add a search functionality with my database using Node & Handlebars to render. However when I search now it's giving me a 404 error, why is it not display search results? Here is my routing info
function searchPokemon(res, mysql, context, searchinput, complete){
var inserts = [req.body.searchinput];
var sql = 'SELECT pokemonname FROM pokemon WHERE pokemonname LIKE "%' + inserts + '%';
mysql.pool.query(sql, inserts, function(error, results, fields){
if(error){
res.write(JSON.stringify(error));
res.end();
}
context.search = results;
complete();
});
}
router.get('/search', function(req, res){
callbackCount = 0;
var context = {};
var mysql = req.app.get('mysql');
searchPokemon(res, mysql, context, req.body.searchinput, complete);
function complete(){
callbackCount++;
if(callbackCount >= 1) {
res.render('search-pokemon', context);
}
}
});
Here is my current page that I am rendering the search functionality on (pokemon.handlebars)
<h1>Current Pokemon Moves -</h1>
<table id="table">
<thead>
<th>Pokemon Name </th>
<th>Evolution Level </th>
<th>Move Name </th>
<th>Strength</th>
</thead>
<input type="text" class="search form-control" name="searchinput" placeholder="Pokemon Name">
<input type="button" class="btn btn-primary" value="Search" onclick="getUsers({{searchinput}})">
<br>
And here is my script to search
function getUsers(searchinput){
$.ajax({
url: '/search-pokemon',
type: 'GET',
success: function(result){
window.location.reload(true);
}
})
};
I had the same issue with the search function and I used typeahead.js.
Instead of 'post' I have used 'get'
router.post('/search', function(..)..
I'll put my code here, so u can get an idea.
app.js
// return homepage
app.get('/',function(req,res){
res.render('index');
});
// search function
app.post('/search',function(req,res){
var str = {
stringPart:req.body.typeahead
}
db.query('SELECT songTitle FROM song WHERE songTitle LIKE "%'+str.stringPart+'%"',function(err, rows, fields) {
if (err) throw err;
var data=[];
for(i=0;i<rows.length;i++)
{
data.push(rows[i].songTitle);
}
res.send(JSON.stringify(data));
});
});
index.ejs
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="../JS/jquery.typeahead.js" type="text/javascript"></script>
<script>
$(document).ready(function(){
$('input.typeahead').typeahead({
name: 'typeahead',
remote: 'http://localhost:3000/search?key=%QUERY',
limit: 10
});
});
</script>
<form method="POST" action="/search">
<label>Search Data</label>
<input class="typeahead tt-query" spellcheck="false" autocomplete="off" name="typeahead" type="text" />
</form>
I have the following code in my controller.
router.get('/', function(req, res, next) {
Appointment.find().then((appointments) => {
console.log(appointments);
res.render('adminappointments', { title: 'Admin-Appointments', appointlink: true, layout: 'adminlayout', appointment: appointments });
}, (err) => {
res.status(400).send(err);
})
});
And in my hbs page
<tbody>
{{#each appointmentt}}
<tr>
<td>{{this._id}}</td>
<td>{{this.name}}</td>
<td>{{this.email}}</td>
<td>{{this.purpose}}</td>
<td>{{this.clinic}}</td>
<td>{{this.message}}</td>
<td>
<button class="btn btn-small btn-inverse"><i class="icon-trash"></i> Delete</button></td>
</tr>
{{/each}}
</tbody>
The table shows no data, but console log is showing the data. Need help.
I store input values into mongodb using scope name. I have a 3 fields when I click add all values are in object so I directly send the scope name into server and store it.
I would like to store only 2nd textbox values and remaining values should be NULL into the database. But I don't know how to do this. Anyone can help me?
Server.js
app.post('/AddNewcontact', function (req, res) {
db.Manage_Facility.insert(req.body, function (err, docs) {
console.log(docs);
res.json(docs);
});
});
controller.js
$scope.AddNew = function () {
$http.post('/AddNewcontact', $scope.Contact).success(function (response) {
});
};
html
<input type="text" name="Name" class="form-control" ng-model="Contact.Name">
<input type="text" name="email" class="form-control" ng-model="Contact.email">
<input type="text" name="cellno" class="form-control" ng-model="Contact.cellno">
<button class="btn btn-primary" ng-click="AddNew()" >Submit</button>
controller.js
$scope.AddNew = function () {
$http.post('/AddNewcontact',{ 'Name': $scope.Contact.email}).success(function (response) {
});
};
Let's say you want to send just the email, do following :
delete $scope.Contact.Name;
delete $scope.Contact.cellno;
here is example
$http.post('/AddNewcontact', $scope.Contact).success(function (response) {
});
I'm trying to put the content in my MongoDB using Mongoose and AngularJS. So far everything seems to be working but when I use ng-repeat the table comes up blank.
HTML code
<div class="container" ng-controller="FormController">
<table class="table table-striped">
<tbody>
<tr ng-repeat="sensordata in sensordatas track by $index">
<td>{{sensordata.topic}}</td>
<td>{{sensordata.message}}</td>
<td>{{sensordata.when}}</td>
</tr>
</tbody>
</table>
</div>
app.js
var app = angular.module('FormApp', []);
app.controller("FormController", function ($http, $scope){
$http.get("/api/sensordata")
.then(function (response) {
$scope.sensordatas = response;
});
})
server.js
//Data Schema
var dataSchema = new mongoose.Schema({
topic: String,
message: Number,
when: Date
}, {collection: "sensordata"});
var sensordata =mongoose.model('sensordata', dataSchema);
//$HTTP GET function
app.get('/api/sensordata', function(req, res) {
sensordata.find(function (err, data) {
res.json(data);
});
});
This is the data I get when I print my data to console. http://i67.tinypic.com/2rhlpwg.png I don't understand the footer of the data.
can you pleae put wrapper around your html view code for app
<div ng-app="app"><div class="container" ng-controller="FormController">
<table class="table table-striped">
<tbody>
<tr ng-repeat="sensordata in sensordatas track by $index">
<td>{{sensordata.topic}}</td>
<td>{{sensordata.message}}</td>
<td>{{sensordata.when}}</td>
</tr>
</tbody>
</table>
</div>
I have a data from the database in a loop and this works great, and the value is in input field, but when i want read this value after click angular return me:
Object {newName: undefined, newEmail: undefined}
and i don't know why. Please for help.
HTML CODE:
<tr ng-repeat="user in users">
<td><input type="text" ng-model="user.name" name="user.name" ></td>
<td><input type="text" ng-model="user.email" name="user.email" ></td>
<td><button ng-click="checkData()">Click</button></td>
</tr>
CONTROLLER CODE:
$scope.user = {};
$scope.checkData = function () {
var data = {
newName: $scope.user.name,
newEmail: $scope.user.email
};
console.log(data);
Inside your ng-repeat code you have displayed each element of users & you are showing the one below another inside tr of table. While you wanted to access the element which you are editing, You need to pass that user object to the checkData method so that you can have access to that specific specific user.
Markup
<tr ng-repeat="user in users">
<td><input type="text" ng-model="user.name" name="user.name" ></td>
<td><input type="text" ng-model="user.email" name="user.email" ></td>
<td><button ng-click="checkData(user)">Click</button></td>
</tr>
Code
$scope.checkData = function (user) {
var data = {
newName: user.name,
newEmail: user.email
}
console.log(data);
};
In your ng-click pass the user model such that it becomes ng-click="checkData(user)"
Then, rewrite your controller code as:
$scope.user = {};
$scope.checkData = function (user) {
console.log(user);
};
You need to give the function the data from the DOM you want to evaluate, which is the current user:
You can use
<tr ng-repeat="user in users">
<td>{{user.name}}</td>
<td>{{user.email}}</td>
<td><button ng-click="check(user)"></button></td>
</tr>
$scope.check = function (thing) {
var currentUser = {
name: thing.name,
email: thing.email
}
}