Access sessionStorage in template EmberJS - javascript

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}}

Related

How to get specific data from large json object into Jade mixin

This is the json from my sever:
data = {"id":393, "state":"mississippi", "lat":null, "lng":null, "title":"someTitle", "country":null};
I then pass that through a Jade temple like so: res.render('editUpload', {fromServer:data});
Then in my Jade template I have this:
var data = !{fromServer};
console.log(data.address);
Which correctly prints mississippi
However, I'm trying to get my mixins to use that data
Mixin:
mixin textBoxMixin(name, label, value)
div(style="display:flex; width:100%;")
span.label #{label}
input(type="text", name="#{name}", value="#{value}")
Then I use that like this:
+textBoxMixin("title", "Title", fromServer)
which fills in the text box with the entire json "{"id":393, "state":"mississippi", "lat":null, "lng":null, "title":"someTitle", "country":null}" so I go and try this:
+textBoxMixin("title", "Title", fromServer.title)
it prints "undefined".
How do I get this mixin to accept what should just be fromServer.title?
I've tried JSON.stringify(fromServer), data.address (which obviously doesn't work because data is undefined during the rendering of the page). I know that I could go back to my server and parse out all the json there and pass each item as an individual item, but that would be a giant pain since my json is actually much larger than what I've posted here.
The problem was that I was sending the json from the route.js file to the template after having passed it through JSON.stringify(), this let me use var data = !{fromServer}; in the page's scripts, but Jade couldn't parse the String. So now I'm doing this in the route so that I have both the json available for templating and the String for JavaScript:
data = rows[0][0];
stringFromServer = JSON.stringify(rows[0][0]);
res.render('editUpload', {fromServer:data, stringFromServer:stringFromServer, username: req.session.user});
When you reference parameters in your mixin definition, you pass them exactly as if it were normal pug code, without quotes and braces.
mixin textBoxMixin(name, label, value)
div(style="display:flex; width:100%;")
span.label= label
input(type="text", name=name, value=value)
+textBoxMixin("title", "Title", fromServer.title)
Here's what renders:
Also, Jade is now Pug, and I know you know that since you tagged Pug in this question, you should start referencing it as Pug :).

Underscore.js: TypeError: rc is undefined when using templates

I'm using underscore.js to create templates. I am utilizing the rc variable discussed here and I'm getting rc is undefined messages in my firebug console along with this tidbit:
((__t=( rc.siteid ))==null?'':_.escape(__t))+
I tried sending in empty json as specified like so: var mytemplate = _.template([code], {}) as the issue comment suggested, but the error still persists and my templates don't work.
The solution for me was to always explicitly send in an empty json {} if I didn't have any options to send in. The code would look like this:
var mytemplate = _.template([code]);
$('body').append(mytemplate({}));
I'm creating this question/answer because I did not find a solution on SO or via google.

How to use Django list of objects variable in AngularJS?

So I have a variable like this from Django:
[<Topic object>, <Topic object>]
I pass it to Angular using ng-init like this:
<div class="profile-navigation" ng-init="ProfileTopics={{ProfileTopics|safe}} ">
I got syntax parsing error instead of a success.
angular.js:12520 Error: [$parse:syntax] http://errors.angularjs.org/1.4.8/$parse/syntax?p0=%3C&p1=not%20a%20primary%20expression&p2=16&p3=ProfileTopics%3D%5B%3CTopic%3A%20Topic""bject%3E%2C%20%3CTopic%3A%20Topic%object%3E%5D&p4=%3CTopic%3A%20Topic%object%3E%2C%20%3CTopic%3A%20Topic%object%3E%5D
at Error (native)
at https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.8/angular.min.js:6:416
at Object.s.throwError (https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.8/angular.min.js:210:32)
at Object.s.primary (https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.8/angular.min.js:207:6)
at Object.s.unary (https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.8/angular.min.js:206:174)
at Object.s.multiplicative (https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.8/angular.min.js:205:434)
at Object.s.additive (https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.8/angular.min.js:205:261)
at Object.s.relational (https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.8/angular.min.js:205:96)
at Object.s.equality (https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.8/angular.min.js:204:425)
at Object.s.logicalAND (https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.8/angular.min.js:204:278)
You can't just send an object from Django to Angular. You need to serialize it to JSON first.
You can do that in a basic way with Django's built-in serializers, but the third-party project Django Rest Framework is more customizable and easier to use.
In order to get on Angular, I found this as an amazing guide.
In order to send it from Django, you might need to:
Convert those objects to dicts
Use JSONResponse to return data

Expressjs res.render not rendering values in angularjs partials

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.

How to exclude an object's id property before or during $.toJSON

I'm writing a custom REST adapter for ember-data users with a django rest framework app and need to build a JSON string to do POST/PUT. The only problem is I can't seem to chain another jQuery method after the $.toJSON that removes this.
So far I have an ember.js object that I plan to extract each property from, except my django app doesn't want the id to go along with the HTTP POST
I can get a legit string like so
$.param(record.toJSON());
This results in the following
id=0&username=dat
I'd like a quick way to exclude id when I do this toJSON (does this exist w/ out writing it by hand?) Using jQuery 1.8+
Thank you in advance
Turns out this was really simple
var json_data = record.toJSON();
delete json_data.id;
var data = $.param(json_data);
Now instead of
id=0&username=dat
I now get
username=dat

Categories

Resources