I am new to Angular 5 and I am currently trying to display data from a database to a view. But I am definitely doing something wrong since the view is just getting [object object]. I would like some help in what I am doing wrong.
Thank you.
Service
Component using the service
The Component's HTML
The View
To display the students (not like JSON) , you need to call object.property , in your case user.first_name, user.last_name, user.user_type.
Your component HTML :
<h1>CDM Student</h1>
<div *ngFor="let user of users">
{{user.first_name}} {{user.last_name}}
</div>code here
Also in your API http://localhost:3000/api/users , you shouldn't return the PASSWORD in the JSON (be very careful with this kind of information)
your Code is ok . just add angular json pipe.
Have you seen https://angular.io/api/common/JsonPipe
The Component's HTML
<h1>CDM Student</h1>
<div *ngFor="let user of users">
{{user | json}}
</div>code here
maybe it's helpful for you . Thank you
In your case user is an object,
1. if you want to display an object then use JSON pipe.
{{user | json}}
2. If you want to display sub property of an object then use
{{user.propertyName}}
for example :
{{user.firstName}}
Related
I am working on a project, part of which displays notifications to the user. I have an object which is used to store notifications, and a table in which notifications are displayed. The notifications are written to a JSON file in a proper format for later use.
Currently the way things are, the object has new notifications pushed to it every x seconds, but the actual table only displays the new messages when the page has been reloaded.
I am looking for:
A way to programmatically refresh the data maintained within the table every x seconds.
Or:
A method like webhooks or socket that I can use to send the new object direct to the client.
A method of refreshing the web page every x seconds, without the use of a module like nodemon, which actually kills and resets my server completely.
The JSON File
[
{
"Notification": "Limit Exceeded. Event has occurred. Action needed.",
"Time": "19:54:34",
"Date": "Sun Oct 28 2018 "
},
{
"Notification": "Limit Exceeded. Event has occurred. Action needed.",
"Time": "19:54:34",
"Date": "Sun Oct 28 2018 "
}
]
The JSON file starts empty, and has notifications logged to it. The notifications are pulled from here, and stored in an empty notifications object.
The Handlebars View.
<h2 class="page-header">Notifications</h2>
<h2>{{log}}</h2>
<p>Your Latest Notifications can be Found Below.</p>
{{#if notifications}}
<table style="width:100%" border="1">
<tr>
<th>Notification:</th>
<th>Time:</th>
<th>Date:</th>
</tr>
{{#each notifications}}
<tr>
<td>{{[Notification]}}</td>
<td>{{Time}}</td>
<td>{{Date}}</td>
</tr>
{{/each}}
</table>
{{else}}
<h3>No Current Notifications</h3>
{{/if}}
<form method="post" action="/test/notify" id="removeuserform">
<button type="submit" class="btn btn-default">Reload page.</button>
</form>
And the page of course is rendered using the following line.
res.render('home', {notifications: notifications});
The solution?
I have looked into many a method here, and would love to see your opinions as well. I have seen people use webhooks, I have seen people initialize a button click which redirects to the same page. I cannot use the window.reload function. I have seen people place tags in EJS views, but I am using Handlebars.
Is there a way to simply refresh the data in this notifications object when I push new items into the object? Any ideas you have are greatly appreciated. Thank you in advance.
I think you need to care about 2 parts:
1, Get data from server in real-time via socket. Here you have 3 options:
SocketIO or similar Node.js package
A service such as Pusher, Firebase...
A database that support data syncing, such as PouchDB, Gun, etc
2, Sync data from JavaScript object to view. This calls data binding. Basically, you have a JS object that contains your notifications. And you render that data to HTML, display them to end-user. When that JS object changes, your HTML should be automatically updated. That's one-way binding, from JS object to DOM (model to view). Many UI frameworks or libraries can help you here. You may choose a small tool, such as HyperApp, AppRun, Mithrill, etc.
I've been working with pug/jade a little bit and now I'm trying to build the same project using handlebars.
I have this iteration that renders a few options:
<select id="myselect" name="myselect">
{{#each categories}}
<option value="{{id}}">{{title}}</option>
{{/each}}
</select>
A bit further down the code I need to render some items dynamically based on the selected item from myselect.
Any idea how I can grab it dynamically? Basically the same way like onchange() works in plain javascript.
When you use any kind of tempting engine (handlebars, jade, ejs, etc). You cannot bind data after the response sent to the client. You have to write some client side javascript code to achieve that.
As an alternative you can use handlebarjs on client side. Follow this link
But this may need to be used carefully, since you are using the same template engine on your server side.
I very much new to Node JS and Express Framework & mongodb. I am working on a website which has multiple categories and when we click on category it goes to a view, where based on the category clicked, data gets loaded in the view.
please check the link for website here.
I am looking help for navbar links eg. Montessori Premium->Toddler Material
As these are static links I can not figure how to pass any parameter or url format for this.
I have done the routing for individual products as they have ids coming from database so I am using that id in url.
Thanks in advance.
It seems to me like you're just missing a bit of glue in between the front-end and the back-end database calls. Here's a rough idea of the sequence you might be after and an explanation of what I think you're missing.
If I'm wrong, please add a comment and update your question to include the new details and I'll see about editing my answer.
In this example I'm creating a website which has a list of "items" in a shop and we're looking to display them all on a single page. Each item should then have an a href clicking through to that specific item where there might be more detail such as a "full description" of the item and maybe some images or something. We're going to look at the flow to build that first page with the list of items.
The user makes a HTTP GET call to the root of your website such as "http://www.mystore.com/".
This request comes through in Express to your controller which takes the req, res, next parameters.
Your controller makes a call to the database to get a list of all items including their names and ID's.
You then use something called templating to inject in the list of items.
In this template you iterate through the list doing something like this.
.
<ul>
{{#each items}}
<li><a href="/items/{{id}}>{{name}}</a></li>
{{/each}}
</ul>
In this template (which happens to be Handlebars), we're going through the list of items and using the id and name of each to inject them into the HTML to get something a bit like this back.
<ul>
<li><a href="/items/1>Shoes</a></li>
<li><a href="/items/2>Red spotted dress</a></li>
<li><a href="/items/3>Jeans</a></li>
</ul>
This is then served up to the user once the template has been processed.
In essence I think you're after some sort of templating engine, I'd highly recommend having a look at Handlebars with something like the express-hbs.
Thank you #Elliot for your time to answer this. Yes I am using handlebars for templating. The solution I found is, because I am using static links, I am passing query string in anchor tag link.
eg. http://localhost:8000/product?category=Toddler_Material
and then using req.query for capturing the values (Toddler_Material) in router
var category = req.query.category;
I feel like there is a really simple solution to this problem. However, after trying to solve it for about 3 hours unsuccessfully, I humbly come to you.
The Basics:
A custom post type, " band ", has been created, and has several
custom fields (which were created through the Advanced Custom
Fields
plugin.)
The Question:
How would I get and display the contents (specifically custom field data) of a specific band entry (using its ID or title or slug) inside of a regular post? (see diagram below)
(source: thisnewband.com)
.
Methods to Trigger the Display of the Custom Post Type:
We have to provide the ID/title/slug so that it knows what band post's content to display
Shortcode (such as [band id="21"] ) (added inside post content)
Custom Field (custom field name band-id where you can input the ID of the band)
What I've Tried and Why It Didn't Work:
Shortcode
`[band id="21"] inserted in post editor field
Used WP_Query to query post with type=band and ID="21".
Code located in functions.php
Result: It would echo static text but would not display any post-specific content (Band Name, etc.). Also would not pull post-specific custom field data.
(also tried query_post with no luck)
Custom Field
Entered ID (21) into custom field on post editor page.
Coded it directly into the post template:
Used WP_Query and had the ID in the array pull from the custom field.
Result: Nothing good happened.
Where I Keep Running Into Trouble:
It's hard to pull the custom field data from the custom post type while inside an actual post
The Optimal Solution:
Whether it's by using a shortcode, custom field, or even a new widget, it would be easiest if one could:
Create a PHP template with the code for just how the single Band content is supposed to display. (Including the loop). Example name: band-block.php
Use get_template_part('band-block'); to echo this code (either in Post Template or Shortcode via functions.php)
Thanks for your help! Let me know if you'd like to see any of my code.
I knew you have found a solution for your problem, but for others i will give them an other solution:
You can query by ID, no problem. Look at these: http://www.advancedcustomfields.com/resources/field-types/relationship/
But you have to check in the custom field "return format" the box "Post IDs". Then it works perfectly well.
Sorry for my bad english ;)
Cheers
With some amazing help from Hobo, I was able to come up with a solution!
The main problem was with trying to query by 'ID'. No matter what we tried, it just never worked well. (It could be the way that the Advanced Custom Fields stored the ID field contents.)
What did work:
Created a custom field for the post page in which to put the Band (custom post type) post name/slug into. (Custom field was named post-band-name and created with the Advanced Custom Fields plugin.)
Placed the query code in the Post Template. (See code below)
Done.
The Solution Code
Add this loop after the normal loop...
<?php /* Display all the author's posts from the custom post type ('band') */ ?>
<?php
$authorid = get_the_author_meta( ID, $userID );
$args4=array('author'=>$authorid,'post_type'=>'band', 'numberposts'=> -1);
$cquery4=new WP_Query($args4);
if($cquery4->have_posts()):
while($cquery4->have_posts()):
$cquery4->the_post();
?>
<a href="<?php the_permalink(); ?>" title="<?php the_title_attribute(); ?>">
<p><?php the_title();?></p>
</a>
<?
endwhile;
wp_reset_postdata();
endif;
?>
I just want to show multitab on each node page. and want to pass node id to each tab. each tab should load content either via ajax if noscript it should load via url
Please help me with this any tutorial or reference
Thanks,
Edvin
Create a View that use the node id as an argument. Then you may use Panels to display your view at the desired nod, using tabs style.
Let me know if that was enough to solve your problem. :)
this module will do exact thing , though its more like an api, you have to create link using the function this modules provides .For example
l_ajax("add page", "node/add/page", "#content-content")
OR
<a class="ajax_link" href="node/add/page" rel="#content-content">Add page</a>