We Keep Coding

angular js error when accessing session storage

I am trying to pass object, controller to another controller using '$sessionStorage'
My first controller, I set the object to the session.
$scope.expandChart = function(obj){
$sessionStorage.chartObject = obj;
$state.go('app.chart-full-view');
}
after i am trying to access this object in another controller. please check below code
Second controller (this is 'chart-full-view' controller)
$scope.test = $sessionStorage.chartObject;
console($scope.test);
when I console my object, console log printed correctly with error. What is this error? I need to correctly access this.
as a solution i tried below way. but did not working
$scope.test = JSON.stringify($sessionStorage.chartObject);
Error is "angular.js:15697 TypeError: Converting circular structure to JSON "

You should use stringify when saving the object in sessionStorage and then use parse when getting it
sessionStorage.setItem("chartObject", JSON.stringify(obj));
As you cannot save objects in sessionstorage only strings.
And then
$scope.test = = JSON.parse(sessionStorage.getItem('chartObject'));

How do I update localStorage items?

I'm having a problem where the cached object doesn't resemble the correct data so I figured it I can push up the most uptodate version to the browser cache it will solve my problem.
How do you update your localStorage with a new object? So if I had a controller with that had an assessment updated. How can I push that assessment object up to the localStorage?

To do that with native JavaScript, you would do something like this:
localStorage.setItem('itemKey', JSON.stringify(yourObject));
var item = JSON.parse(localStorage.getItem('itemKey'));
Within the context of angular, you should make a localStorage service as a wrapper around localStorage and inject it into your service or controller. Or you could inject $window and use it directly off of that like: $window.localStorage

A response specifically for the asker of this duplicate question:
LocalStorage can only store strings, which is why you're stringifying your object before storing it. To manipulate the stored string as an object, you can pass it to JSON.parse (assuming it's properly JSON-formatted). Then to store the modified version, you need to convert it back into a string.
// Creates JSON-formatted object, converts it to a string and stores the string as "ship"
const ship = { name: "black pearl", captain: "Jack Sparrow" };
const originalStringifiedForStorgage = JSON.stringify(ship);
localStorage.setItem("ship", JSON.stringify(ship));
// Retrieves the string and converts it to a JavaScript object
const retrievedString = localStorage.getItem("ship");
const parsedObject = JSON.parse(retrievedString);
// Modifies the object, converts it to a string and replaces the existing `ship` in LocalStorage
parsedObject.name = "newName";
const modifiedndstrigifiedForStorage = JSON.stringify(parsedObject);
localStorage.setItem("ship", strigifiedForStorage);

If the object is in JSON format (not sure if Angular uses a different format) you could probably use the setItem() and getItem() methods to update and retrieve local storage items!
For example taken from the following post:
http://thejackalofjavascript.com/storing-objects-html5-local-storage/
var me = {name:'myname',age:99,gender:'myGender'};
localStorage.setItem("user",me);
//fetch object
console.log(localStorage.getItem("user")); // will return "[object Object]"

You can use full featured Angular module angular-local-storage
An AngularJS module that gives you access to the browsers local
storage with cookie fallback
set
myApp.controller('MainCtrl', function($scope, localStorageService) {
//...
function submit(key, val) {
return localStorageService.set(key, val);
}
//...
});
get
myApp.controller('MainCtrl', function($scope, localStorageService) {
//...
function getItem(key) {
return localStorageService.get(key);
}
//...
});

setItem wont work instead it will create another item in localStorage with the same name
Instead directly use
localStorage.item = (what ever the change that you want in the item)

Meteor getting data from router

I'm having trouble getting data from iron:router.
Im trying to get the data by param._id and then pass it to my template.created to set a session variable for editing purposes.
Here is my code in the router:
Router.route('/edit/:_id', function(){
this.render('edit', {
data: function(){
return Collection.findOne({_id: this.params._id})
}
})
})
And then I want to access that data here:
Template.edit.created = function(){
data = ???
Session.set('edit', data)
$(input).val(data.post)
}
If i do console.log( this ) I get Blaze.TemplateInstance.
But when I console.log(this) in Template.edit.events I get the document I want from the iron:router.

I've used Template.currentData(); and managed to access the data in template.created but can someone explain why "this" in template.created and template.events refers to 2 different things?

For template.created and template.rendered you can access the data with this.data.

Delay returning variable until data synced from Firebase

I am using angular and firebase using angularfire in an app. I have a number of text documents stored in firebase. I want to take all of these documents and return an array of all the paragraphs in these documents for manipulation with angular.
I created a service which syncs the data from firebase with a variable documents. This the service has the following function to change this to an array of paragraphs.
getParas: function(){
var paras = [];
for(var i=0;i< documents.length;i++){
paras = paras.concat(documents[i].text.split('\n'));
}
return paras;
}
However because of the time the data takes to sync from firebase the function returns before the changes have been made to the paras variable.
I've tried using documents.$loaded().then(function(){... but am not sure how to return the result of this from the getParas() function.
I've seen article, but a filter doesn't seem like the best option for this?
Thanks
Matthew

You have two options.
Resolve the "documents" variable before the page is loaded with
routes.
Use promises, and make sure "getParas" is
called after the data is set to the "documents" variable.
Below is a solution with promises that does it all in the controller, you could start with this then try to incorporate it into your service.
.controller("YourCtrl", ["$scope", "$q", function($scope, $q){
var promise = getFB();
promise.then(function(){
afterPromise();
})
function getFB(){
var documentRef = new Firebase("YOURFIREBASERURL/documents")
var fireDataDef = $q.defer()
documentRef.once("value", function(snapshot){
$scope.documents = snapshot.val();
fireDataDef.resolve();
})
return fireDataDef.promise;
}
function afterPromise(){
var $scope.paras = [];
for(var i=0;i< $scope.documents.length;i++){
$scope.paras = $scope.paras.concat(documents[i].text.split('\n'));
}
}
}]

Since it wasn't the question, I'm going to ignore the fact that you should probably just store the paragraphs in a separate path, so you can just fetch them ready to go, rather than going through this extraneous step of parsing them each time they are read. But I will point out that storing the data how you will read it back is a big step in the right direction.
For several reasons, using $loaded is incorrect here. First of all, you've taken dynamic, real-time data and turned it into a static asset that will not update when the source data changes. Might as well just store it in a file on the web server and fetch it with HTTP if this is the case. Secondly, utilizing $loaded() generally means you're creating extra work for yourself and trying to micromanage things AngularFire already does very well, like managing asynchronous downloads and manipulating data in the synchronized array.
Most likely, you just want to use $extendFactory to create an additional method on the array prototype.
// create a factory that has a getParas method
app.factory('ListFactory', function($FirebaseArray) {
return $FirebaseArray.$extendFactory({
getParas: function() {
var paras = [];
for(var i=0; i < this.$list.length; i++){
paras = paras.concat(this.$list[i].text.split('\n'));
}
return paras;
}
});
});
// create the synchronized list
app.factory('List', function(ListFactory, $firebase) {
return function(ref) {
return $firebase(ref, {arrayFactory: ListFactory}).$asArray();
}
});
app.controller('ctrl', function(List, $window, $scope) {
var ref = new $window.Firebase(URL);
$scope.list = List(ref);
});
Then in your view, just reference the new method:
<pre>
{{list.getParas()|json}}
</pre>

Use $scope as json data with the $http service

I want to post everything that's on angular's scope service, its not much in my case but I don't want to create another object:
var model = angular.toJson($scope);
$http.post('/myUrl', model)
.success(function(data) {
});
However, it looks like $scope is a circular structure, because you can tell via: Converting circular structure to JSON when I use JSON.stringify or the string literal $Scope when I use the sample above.
Is there anyway to capture all of this data off of $scope?
This is my current hack, using underscore and underscore.string:
var toJs = function(item) {
var obj = {};
_.each(item, function(val, key) {
if (!_s.startsWith(key,'$')) {
obj[key] = val;
}
});
return obj;
};
then just passing:
toJs($scope)

You don't want to create new object, so a possible dirty solutions is to remove the circular reference and every other property you don't want to POST from $scope, call toJson, then put all previously deleted properties back to $scope.

Nest a child property on $scope and call toJson on that.
<input ng-model='email'>
becomes
<input ng-model='user.email'>
so that
$http.post('/url', angular.toJson($scope.user));