Expressjs res.render not rendering values in angularjs partials - javascript

I am redirecting to next page after login on expressjs after login, I have some partials to be loaded from angularjs routers which is all fine and working. In res.render I have some data set like this.
res.render('employelogin/employlogin', { title: 'Sheet | Employee',userName: req.session.nameName,DateTime:resultDate,timesheet:timeSheet});
On the Angularjs, I have a jade template which loads fine as told, there I am trying to get the DateTime and Timesheet being printed this is the code
****was at #{DateTime} and was #{timesheet}
I am not getting the datetime and timesheet text being printed here.
** The data for the fileds are coming. I have seen it coming on console **

I have something like this in my jade template (I'm sending an api object and a token)
script(type="text/javascript").
var api = !{JSON.stringify(api)} , token= '!{token}';
I declare both as global variables that I re-use in AngularJS. Hope this helps.

Related

Access sessionStorage in template EmberJS

I have saved some data in sessionStorage (a large JSON response from ajax) in EmberJS, and wanted to know if there was a way to access that directly in template handlebars. If not, what would be my alternatives? I have tried {{sessionStorage.getItem("data"}} in template but it gives me an error saying "Expecting 'ID', got 'INVALID'".
You should set the item in sessionStorage to a variable in your component.js like this:
init:function(){
this.set('sessionStorageData', sessionStorage.getItem('data'));
}
and use it in your hbs like this:
{{sessionStorageData}}

Display data from database (using mongodb) in hbs/html file Node.Js

I started studying node.js, and now I'm trying to do a "Todo-App".
I'm trying to find the best way to transfer data from my database (using mongodb) into my hbs files, so I could display it.
From the server.js -> server to the hbs -> client (correct to me if I'm wrong please, by assuming that server.js is the server of course and the hbs file is the client)
So, I succeeded to do it by passing an array.
but when I'm trying to display in html desing, it just looking bad.
The code:
app.get('/allTasks',(req,res)=>{ //get (go to) the allTasks (hbs file)
Todo.find().then((todos) => {
console.log(todos);
var arrayOfTodos = [];
todos.forEach(function(element){
console.log("\n\n\n\n\n elemnt details: ",element.text + "\n",element.completed+"\n");
arrayOfTodos.push(element.text,element.completed);
});
res.render("allTasks.hbs", {
pageTitle: "Your tasks: ",
todos: arrayOfTodos
});
});
});
The result is:
You can see a picture
As you can see, its just looking bad... cause it just display an array,
an I want to display each task seperately.
Any tips?
Thanks a lot,
Sagiv
Instead of using push just do:
Todo.find().toArray(function(err, result){
arrayOfTodos = result;
})
Once you have your array, the design got nothing to do with mongodb. You will need to learn how to use your render technology. You need to touch your html template, so you should start by posting that.
The problem solved.
I just had to learn how to handle the data in the hbs side.
so the code is: (in hbs)
{{#each todos}}
{{missionNumber}} <br>
{{text}}<br>
completed = {{completed}}<br><br>
{{/each}}
as you can see, the each is a loop , that pass on the todos parameter (my array)
and i just have to display the data in the way i want it to be displayed.
thanks for your help.

Getting BadMethodCallException when using JavaScript package

I am sending a get request to a route and my controller picks up a collection from the database and then puts it into a javascript variable using Laracasts Javascript class (can be found here. It is a Php variable to javascript variable transformer- and I think it does so in a pretty standard way)
I do so like this:
$unReadNotifications = \App\Notification::join('users', 'notifications.notifier_user_id', '=', 'users.id')
->where('notifications.user_id', '=', $user->id)
->where('is_read', '=', 0)
->select('users.id as notifierId', 'users.username as username', 'notifications.id as id', 'notifications.subject as subject', 'notifications.body as body', 'notifications.notifiable_type as notifiable_type', 'notifications.notifiable_id as notifiable_id')
->orderBy('notifications.created_at', 'desc')
->with('notifiable')->get();
JavaScript::put(['unReadNotifications' => $unReadNotifications]);
and I am getting:
BadMethodCallException in Builder.php line 2405:
Call to undefined method Illuminate\Database\Query\Builder::getTagNameListAttribute()
I did a grep -r getTagNameListAttribute * and the only place it appears in my project is in a model (the model is actually related: some of my notifications belongTo a Notifiable which belongsTo a Content- this Content model is the one that has this method called getTagNameListAttribute and there is an appends array in that model which appends the output of that method to the model like so: protected $appends = ['tag_name_list'];).
The error is happening when running JavaScript::put(['unReadNotifications' => $unReadNotifications]); because when I put a dd right before this, all is fine, and anytime after I still get the error.
I am guessing that the Javascript::put is somehow calling some sort of get on a notification's notifiable's Content. This code works when all of the notifications are the kind that their notifiable have a Content, but now when the notification's notifiable does not have a content, I am getting this error. But I don't really understand why it would do that.
Any ideas as to what is going on?

Using handlebars.js for dynamic user content?

Handlebars is commonly used on static predefined html templates and then given dynamic data via JSON, but what if the template itself comes from json?
I'm trying to build a community forum whereby I have a template that gets filled in for where the users post goes. The post itself however also contains template information (which is dynamic). How can I get handlebars to process a dynamic template that just came out of ajax?
For example, a users post can contain any or all of the following in any order: text, pictures, links, videos, etc.
The content will look something like this:
{{text-open}} blablabla heres a picture {{text-close}}{{image-open}}
http://someRandomUrl.com {{image-close}} {{image-open}}
http://anotherRandomUrl {{image-close}}
I'm not sure how to do this with handlebars. I have the feeling maybe I should just use a string replace function? But would that be the optimal method?
You just have to compile the template:
fetch("post.hbs")
.then(source => Handlebars.compile(source))
.then(postTemplate => {
// Do stuff, then fill the template:
postElement.innerHTML = postTemplate(postData);
});

Send json to jade

I am sending a big json file from server to jade, but the " are replaced with: " therefor the json is unreadable/unparsable and I get this error:
Uncaught SyntaxError: Unexpected token &
I send the data like this from node:
res.render(view, {world:{name:"SomeName",width:50},otherdata:{...}});
and then get it in jade like this:
doStuff(JSON.parse(#{data}));
and here it is unreadable data which looks like:
{world:{name:"SomeName",width:50...
can I somehow disable the conversion of the quotes?
Server side within your rout you will do the following consider the object user
var user = {username:"myname"};
res.locals.user = user ;
response will be :
res.render('view');
jade view will have the variable available :
if user
script(type='text/javascript').
var user = !{JSON.stringify(user)};
Try adding app.use(bodyParser.json()); if you still have the issue
hope that helps
No experience with jade but from the language reference (http://jade-lang.com/reference/interpolation/) i guess
doStuff(JSON.parse(!{data}))
might work

Categories

Resources