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>
Related
i am using vs code as ide.
this is the app code.
<template>
<div class="hello">
<!-- Select All records -->
<input type='button' #click='allRecords()' value='Select All users'>
<br><br>
<!-- Select record by ID -->
<input type='text' v-model='userid' placeholder="Enter Userid between 1 - 24">
<input type='button' #click='recordByID()' value='Select user by ID'>
<br><br>
<!-- List records -->
<table border='1' width='80%' style='border-collapse: collapse;'>
<tr>
<th>Username</th>
<th>Name</th>
<th>Email</th>
</tr>
<tr v-for='user in users'>
<td>{{ user.username }}</td>
<td>{{ user.name }}</td>
<td>{{ user.email }}</td>
</tr>
</table>
</div>
</template>
<script>
import axios from 'axios';
export default {
name: 'HelloWord',
data: {
users:"",
userid: 0
},
methods: {
allRecords: function () {
axios.get('api/ajaxfile.php')
.then(function (response) {
app.users = response.data;
})
.catch(function (error) {
console.log(error);
});
},
recordByID: function () {
if (this.userid > 0) {
axios.get('ajaxfile.php', {
params: {
userid: this.userid
}
})
.then(function (response) {
app.users = response.data;
})
.catch(function (error) {
console.log(error);
});
}
}
}
}
</script>
running the app code, chrome dev tools, like resposnse displays me the source code of the php file (which doesn't run).
The php file in another environment, using html including axios.js vue.js files as src (CDN) script works fine.
where am I wrong or how should I configure the vs code environment?
Because localhost:8080 runs no PHP server you must use a server which is running PHP, either on your local machine (e.g. MAMP) or on your public server. If the project resides under the folder my_project and the PHP file under the subfolder static, the proxyTable must look like:
proxyTable: {
'/static/dserver.php': {
target: 'http://localhost/my_project',
changeOrigin: true
}
which resolves in http://localhost/my_project/static/dserver.php .
I am trying to display data stored in a Firebase remote database in a Vue 3 webpage with a table however when I route to the display page I return the error. This is what my code looks like.
This is the HTML that displays the table:
<template>
<section v-if="!this.results.length">
No data to show
</section>
<section v-else>
<table class="table">
<thead>
<tr>
<th scope="col">View</th>
<th scope="col">Identification</th>
<th scope="col">Name</th>
<th scope="col">Surname</th>
<th scope="col">Email</th>
</tr>
</thead>
<tbody>
<tr v-for="res in results" :key="res.id">
<!-- <td><button class="btn btn-primary">View</button></td> -->
<td>{{res.idCard}}</td>
<td>{{res.name}}</td>
<td>{{res.surname}}</td>
<td>{{res.email}}</td>
<!-- <td><button class='btn btn-primary'>Update</button></td> -->
</tr>
</tbody>
</table>
</section>
</template>
And this is the Javascript. Here it is supposed to fetch the data from the firebase and push it into the results[] array.
<script>
export default {
data(){
return{
results: []
};
},
methods:{
async getData(){
console.log("Getting data");
try{
const response = await fetch("https://fir-example-56e32-default-rtdb.europe-west1.firebasedatabase.app/contact.json",{
method: 'GET'
}) //the below will parse the data thats part of the response if it is in json format; returns a promise
const responseData = await response.json();
if(!response.ok){
console.log("Something went wrong")
}
const results = [];
for (const id in responseData){
results.push({
id:id,
idCard: responseData[id].idCard,
name: responseData[id].name,
surname: responseData[id].surname,
email: responseData[id].email,
});
this.results = results;
}
}catch(error){
console.log(error);
}
},
},
//when component is fully initialised call method
mounted(){
this.getData();
}
}
</script>
the form in question
what it should look like
I tried using datatables for live data but my problem is, every time my data updates, I can't use searching and every time I use pagination, it goes back to first page. Can somebody knows what datatable plugin is compatible with angular?
Here is my code for realtime update of data:
angular.module('selectExample', [])
.controller('ExampleController', ['$scope','$interval', function($scope,$interval) {
$interval(function () {
$scope.register = {
regData: {
branch: {},
},
names: [
{name:"narquois"},{name:"vorpal"},{name:"keen"},
{name:"argol"},{name:"long"},{name:"propolis"},
{name:"bees"},{name:"film"},{name:"dipsetic"},
{name:"thirsty"},{name:"opacity"},{name:"simplex"},
{name:"jurel"},{name:"coastal "},{name:"fish"},
{name:"kraken"},{name:"woman"},{name:"limp"},
],
};
}, 1000);
}]);
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.7.5/angular.min.js"></script>
<div ng-app="selectExample" ng-controller="ExampleController">
<table id="example" width="100%">
<thead>
<tr align="center">
<th>Name</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="person in register.names">
<td align="center">{{ person.name }}</td>
</tr>
</tbody>
</table>
</div>
Enable state saving and override state save/load handlers to use only the table's DOM id:
$('#example').dataTable( {
stateSave: true,
stateSaveCallback: function(settings,data) {
localStorage.setItem( 'DataTables_' + settings.sInstance, JSON.stringify(data) )
},
stateLoadCallback: function(settings) {
return JSON.parse( localStorage.getItem( 'DataTables_' + settings.sInstance ) )
}
} );
You have to initialize your DataTable with the option stateSave. It enables you to keep the pagination, filter values, and sorting of your table on page refresh. It uses HTML5's APIs localStorage and sessionStorage.
$('#example').dataTable( {
stateSave: true
});
I have a simple WebApi project to manipulate returned data in various format. I am trying to use KnockoutJs to consume the data at the front end but I am having a variable not defined error that I can't seem to understand why. Below is the simple code I am working on. Please feel free to point out the errors. Thanks
Controller formats
[httpGet]
public Object Data
{
return new {
Time: DateTime.now,
Text: "<b>Salut</b>",
Count: 1
};
}
JS front end
<script>
$(document).ready(function(){
$.ajax("/api/formats", {
success: function(data){
dataObject = ko.observable(data);
ko.applyBindings();
}
};
});
HTML
<tbody>
<tr>
<td>Time</td>
<td data-bind="text: dataObject().Time">
<td>Text</td>
<td data-bind="text: dataObject().Text">
</tr>
</tbody>
At first,your variable dataObject does not have Time and Text properties, so you should check it in your code as following:
var dataObject = ko.observable();
ko.applyBindings();
function doBinding() {
var data = {
Time: "XYZ",
Text: "<b>Salut</b>",
Count: 1
};
dataObject(data);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.4.2/knockout-min.js"></script>
<div>
<div data-bind="text: dataObject() ? dataObject().Time : 'No Data'"></div>
<div data-bind="text: dataObject() ? dataObject().Text : 'No Data'"></div>
<div>
<button onclick="doBinding()">binding</button>
Here table contains book details which contains book name, author, pric, ISBN and category. When user click on Book Name it should pass the data to another page using querystring
<script type="text/javascript" src="book.js">
<body ng-app="mymodule" >
<div ng-controller="myController" >
<table border=2>
<thead>
<tr>
<th>ISBN</th>
<th>NAME</th>
<th>AUTHOR</th>
<th>CATEGORY</th>
<th>PRICE</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="book in books">
<td>{{ book.ISBN }}</td>
<td >{{ book.Name }}</td>
<td>{{ book.Author }}</td>
<td>{{ book.Category }}</td>
<td>{{ book.price }}</td>
</tr>
</tbody>
</table>
books.js
var myapp = angular.module('mymodule', []);
myapp.controller("myController", function($scope, $http,$window) {
$http.get("https://api.myjson.com/bins/p4ujn").then(function(response) {
$scope.books = response.data;
$scope.getdetail=function(){
$scope.getbookdetail=this.book;
$window.location.href = "orderpage.html";
}
});
});
orderpage.html
<script type="text/javascript" src="book.js"></script>
<body ng-app="mymodule" >
<div ng-controller="myController" >
{{getbookdetail.Name}}<br>
{{getbookdetail.Author}}
{{getbookdetail.price }}<br>
</div>
</body
So you said this: 'When user click on Book Name it should pass the data to another page using querystring'
Querystring is not the best method to use for something like this. You're better off learning about ui-router and setting up routes that handle this. You have your initial state, then you can create another state to display each book. Something like this:
.state('initial', {
url: 'some/initial',
template: 'some/initial/template.html',
params: {
name: null,
price: null,
author: null,
isbn: null,
category: null
}
})
.state('read-book-details', {
parent: 'initial',
url: 'some/url',
template: 'some/template.html',
params: {
name: null,
price: null,
author: null,
isbn: null,
category: null
}
})
Then when you're transitioning from one 'state' to another, you do it like so passing along the parameters you want:
$state.go('read-book-details',
{ name: book.name, price: book.price, author: book.author });
On the 'other' page's controller (ie the controller for the 'read-book-details' state) you can inject $state and get the parameters that are passed in via $state.params (ie., $state.params.price)
A second option for you is to have a service that you can store the data in, then retrieve from anywhere else. This obviously becomes useful when you start to pass around larger amounts of data rather than simpler smaller pieces (like name, price).