I integrated ng-table to my jhipster project, with
bower install ng-table
All is ok. I added to index.html the module, I added to the app.js as module dependency.
I test the school case at the official website, helping with some basic example found on internet.
But nothing to do, the content of the table is ALWAYS empty, even with hard coded data content. My simplest example :
<div class="table-responsive">
<table ng-table="tableParams" class="table" show-filter="true">
<tr ng-repeat="myvar in $data">
<td title="'Myvar'" >
{{myvar}}</td>
<td title="'tableParams'" >
{{tableParams}}</td>
</tr>
</table>
</div>
In the controller :
console.log("test log1");
var data = [{name: "Moroni", age: 50} /*,*/];
$scope.tableParams = new NgTableParams(
{
},
{
total: 0, // length of data
counts: [], // hide page counts control
getData: function($defer, params)
{
console.log("test log3");
data = [{name: "Moroni", age: 50} /*,*/];
$defer.resolve(data.content);
},
data: [{name: "Moroni", age: 50} /*,*/],
dataset: [{name: "Moroni", age: 50} /*,*/]
}
);
Logs display well : "test log3" is displayed ! But the 'tableParams' or 'mywar' are always empty.
Need your help :(.
Related
I'm trying to print data in the angular table, the data is coming from a node in JSON format. But while printing t's showing undefined even in console data is showing.
I have attached the JSON response image as well.
I'm fetching data from MongoDB using and sending data to Angular using API.Data is coming but issue is that it's not printing in the table.
<table class="table table-bordered table-striped ">
<thead>
<tr>
<th>Username</th>
<th>Date registered</th>
<th>Role</th>
<th>Status</th>
</tr>
</thead>
<tbody>
<tr *ngFor="let x of data ">
<td>{{x.serial}}</td>
<td>2012/01/01</td>
<td>Member</td>
<td>
<span class="badge ba+dge-success">Active</span>
</td>
</tr>
</tbody>
</table>
JSON Repsone From API
{
code: 0,
message: "success",
data: {
labels: [
{
_id: "605b262c36c70c354015a945",
serial: "12345",
sourceApi: "ASDASD",
resultApi: "ASDASD",
labelApi: "ASDASD",
__v: 0
},
{
_id: "605b26bd36c70c354015a946",
serial: "3333",
sourceApi: "sdfdg",
resultApi: "sdsf",
labelApi: "gggg",
__v: 0
},
{
_id: "605b26ea2e5ea63080dd4796",
serial: "3333",
sourceApi: "sdfdg",
resultApi: "sdsf",[enter image description here][1]
labelApi: "gggg",
__v: 0
}
]
}
}
TS file code
export class TablesComponent implements OnInit{
public data?:any;
constructor(private api:ApiServiceService) {
this.api.getDataApi().subscribe(data => {
this.data = data;
})
}
dtOptions: any = {};
ngOnInit(){
this.dtOptions = {
"paging" : true,
"ordering": true,
"info" : true
};
}
your JSON consists of some other data which are not needed to populate data.
In your JSON label is consists of an array of the object so we have to assign that to "data" variable
export class TablesComponent implements OnInit{
public data?:any;
constructor(private api:ApiServiceService) {
this.api.getDataApi().subscribe(data => {
this.data = data.data.labels;
})
}
I'm trying to iterate through an array to send a list of products that a customer as ordered. I have the handlebars template displaying, but my {{#each}} function isn't working. I'm using Nodejs and expressing and receiving data from my React frontend via a POST request.
Data is returned like this:
{
order_total: 1200,
customer_email: roger#mail.com,
customer_first_name: Roger,
customer_last_name: Smith,
customer_address: 1024 Cherry Street,
customer_city: Langley Falls,
customer_state: Virginia,
customer_zip: 11111,
customer_phone: 123456789,
status: in progress,
order_items: [
{
product_id: 12,
title: Slay bed,
image_url: url,
price: 400,
quantity: 1,
color_id: 12,
image_id: 7
},
{
product_id: 13,
title: dresser,
image_url: url
price: 800,
quantity: 1,
color_id: 12,
image_id: 7
}
]
}
I store the order_items in a variable const order_items = req.body.order_items
My msg object looks like this:
const msg = {
to: [order.customer_email],
bcc: 'test#test.com',
from: 'test#test.com',
subject: `Test`,
html:
`<head>
<title></title>
</head>
<body>
<div data-role="module-unsubscribe" class="module" role="module" data-type="unsubscribe" style="color:#444444; font-size:12px; line-height:20px; padding:16px 16px 16px 16px; text-align:Left;" data-muid="4e838cf3-9892-4a6d-94d6-170e474d21e5">
<p>This is a conformation that your order has been processed.
You will receive a delivery time within the next 24 hours. Thanks for being a valued customer. Please see order below. If any part of this order is incorrect please reach out to us at test#mail.com</p>
<h3 style="margin-top:4rem;">Order #${addedOrder}</h3>
<p style="font-size:12px; line-height:20px;"> Name on order: ${order.customer_first_name} ${order.customer_last_name}</p>
<p style="text-transform:capitalize">Address: ${order.customer_address} ${order.customer_city} ${order.customer_state}, ${order.customer_zip}</p>
<p>Phone Number: ${order.customer_phone}</p>
<p>Order Status: ${order.status}</p>
{{#each order_items}
<div>
<img style="width:100%;" src="{{this.image_url}}"/>
</div>
<p style="font-size:1.3rem" >{{this.title}}</p>
<p style="font-size:1.5rem">{{this.price}}</p>
<p>Total: $800</p>
{{/each}}
</body>`
};
sgMail.send(msg).then(() => {
console.log('Message sent', msg)
}).catch((error) => {
console.log(error.response.body)
console.log(error.response.body.errors[0].message)
})
It seems you forgot a bracket in this line :
{{#each order_items}
Should definitely be :
{{#each order_items}}
Is this the same in your code ?
Also (it's unlikely but still), there might be a rule that forbid you to have many html tags inside a loop ? Check if you have to wrap them in a single div (again I don't remember anything like this ...)
I have configured a react website to receive json data and store it into an array in the format depicted in the attached image. How would I go about displaying this information in a table format?json data stored in array
If you don't want to use property names, you could do something like that :
import React, { Component } from "react";
import { render } from "react-dom";
const App = () => {
const data = [
{ id: 0, value: "item 1" },
{ id: 1, value: "item 2" },
{ id: 2, value: "item 3" }
];
const keys = Object.keys(data[0]);
return (
<div>
<table>
<thead>
{keys.map(key => {
return (
<th>
<td>{key}</td>
</th>
);
})}
</thead>
<tbody>
{data.map((item, index) => {
return (
<tr>
{keys.map(key => (
<td>{item[key]}</td>
))}
</tr>
);
})}
</tbody>
</table>
</div>
);
};
render(<App />, document.getElementById("root"));
Note that all of your items need to have the same properties (here 'id' and 'value') for this to work.
Here is the repro on stackblitz
If you need something better then you should look for a package made for this, there's plenty on internet.
I have a collection that has three fields: name(String), email(String) and appointments(Object)
I query the collection inside a router.get based on user email
router.get('/appointments', ensureAuthenticated, function(req, res, next) {
var query = {email: req.user.email};
PatientList.find(query, function(err, data){
if (err) throw err;
res.render('appointments', {data : data, title: 'Appointments'});
});
});
data from the query above looks like this:
{ __v: 0,
name: 'dan',
email: 'dan#gmail.com',
appointments:
[ { _id: 58373466542d6ae430a13337,
position: '1',
name: 'dan',
email: 'dan#gmail.com',
serviced: false,
hospital: 'Toronto hospital',
date: 'Thursday, November 24, 2016',
__v: 0 },
{ _id: 5837346a542d6ae430a13339,
position: '2',
name: 'dan',
email: 'dan#dan.com',
serviced: false,
hospital: 'Calgary hospital',
date: 'Thursday, November 24, 2016',
__v: 0 },
]
I want to access these fields inside the appointments field and display them on a table using handlebars. My html with handlebars looks like this
<table class="table table-striped table-bordered">
<thead>
<tr>
<td>Clinic</td>
<td>Appointment Date</td>
<td>Patient Number</td>
<td>Clinic Queue Status</td>
</tr>
</thead>
<tbody>
{{#each data}}
<tr>
<td>{{this.appointments.hospital}}</td>
<td>{{this.appointments.date}}</td>
<td>{{this.appointments.position}}</td>
<td>{{#if this.appointments.serviced}}
Please return to the clinic immediately.
{{else}}
Patient is currently being served.
{{/if}}
</td>
</tr>
{{/each}}
</tbody>
</table>
But it is not printing anything in the table
Passing properties to your view ( template ) via res.render results in those properties become available for use in your template.
You are passing a data property in your handlebars template, so you need to use your data variable inside, which is an object, that contains the appointments array.
In order to properly render them you need to use #each against data.appointments like :
{{#each data.appointments}}
<tr>
<td>{{hospital}}</td>
<td>{{date}}</td>
<td>{{position}}</td>
<td>{{#if serviced}}
Please return to the clinic immediately.
{{else}}
Patient is currently being served.
{{/if}}
</td>
</tr>
{{/each}}
Also keep in mind that when you use #each all of the properties of your array are served as locals for this block. So this. is not necessary anymore.
How can i scrape hacker news (https://news.ycombinator.com/) via x-ray/nodejs?
I would like to get something like this out of it:
[
{title1, comment1},
{title2, comment2},
...
{"‘Minimal’ cell raises stakes in race to harness synthetic life", 48}
...
{title 30, comment 30}
]
There is a news table but i dont know how to scrape it...
Each of the stories on the website consists of three columns. These do not have a parent that is unique to them. So the structure looks like this
<tbody>
<tr class="spacer"> //Markup 1
<tr class="athing"> //Headline 1 ('.deadmark+ a' contains title)
<tr class> //Meta Information 1 (.age+ a contains comments)
<tr class="spacer"> //Markup 2
<tr class="athing"> //Headline 2 ('.deadmark+ a' contains title)
<tr class> //Meta Information 2 (.age+ a contains comments)
...
<tr class="spacer"> //Markup 30
<tr class="athing"> //Headline 30 ('.deadmark+ a' contains title)
<tr class> //Meta Information 30 (.age+ a contains comments)
So far i have tried:
x("https://news.ycombinator.com/", "tr", [{
title: [".deadmark+ a"],
comments: ".age+ a"
}])
and
x("https://news.ycombinator.com/", {
title: [".deadmark+ a"],
comments: [".age+ a"]
})
The 2nd approach returns 30 names and 29 comment-couts... I do not see any possibility to map them together as there is no information which of the 30 title's is missing a comment...
Any help appriciated
The markup is not easy to scrape with X-ray package since there is no way to reference the current context in a CSS selector. This would be useful to get the next tr sibling after the tr.thing row to get the comments.
We can still use the "next sibling" notation (the +) to get to the next row, but, instead of targeting the optional comments link, we'll grab the complete row text and then extract the comments value with regular expressions. If no comments present, setting the value to 0.
Complete working code:
var Xray = require('x-ray');
var x = Xray();
x("https://news.ycombinator.com/", {
title: ["tr.athing .deadmark+ a"],
comments: ["tr.athing + tr"]
})(function (err, obj) {
// extracting comments and mapping into an array of objects
var result = obj.comments.map(function (elm, index) {
var match = elm.match(/(\d+) comments?/);
return {
title: obj.title[index],
comments: match ? match[1]: "0"
};
});
console.log(result);
});
Currently prints:
[ { title: 'Follow the money: what Apple vs. the FBI is really about',
comments: '85' },
{ title: 'Unable to open links in Safari, Mail or Messages on iOS 9.3',
comments: '12' },
{ title: 'Gogs – Go Git Service', comments: '13' },
{ title: 'Ubuntu Tablet now available for pre-order',
comments: '56' },
...
{ title: 'American Tech Giants Face Fight in Europe Over Encrypted Data',
comments: '7' },
{ title: 'Moving Beyond the OOP Obsession', comments: '34' } ]