The use of {foo|json} is effective for displaying only part of the $scope. Is there a way to pass the entire scope to the json filter?
The use of {foo|json} is effective for displaying only part of the $scope. Is there a way to pass the entire scope to the json filter?
It appears that the JSON filter in AngularJS does not allow for outputting the entire $scope object, even when attempting to manipulate it using the controllerAs syntax and connecting the injected $scope to your context.
Example Setup:
<div ng-app="app">
<div ng-controller="TestCtrl as vm">
<div ng-bind="vm.foo | json"></div>
<div ng-bind="vm.scope | json"></div>
</div>
</div>
JavaScript Functionality:
var app = angular.module('app', [])
.controller('TestCtrl', function ($scope) {
var vm = this;
vm.foo = {
bar: "sample bar",
foobar: "example foobar"
};
vm.scope = $scope;
console.log(vm.scope);
});
In the provided JSFiddle link,
{ "bar": "sample bar", "foobar": "example foobar" }
is displayed for vm.foo, whereas
"$SCOPE"
is shown for vm.scope.
Hence, it seems impossible to directly pass the complete scope object to the json filter. Instead, you will need to manually extract and structure the necessary data into a new object. Meanwhile, utilizing angular.copy is also prohibited by Angular in this scenario.
In Angular, there is a built-in toJSON function that prevents you from accessing it in the usual way.
function toJson(obj, pretty) {
if (typeof obj === 'undefined') return undefined;
return JSON.stringify(obj, toJsonReplacer, pretty ? ' ' : null);
}
function toJsonReplacer(key, value) {
....
} else if (isScope(value)) {
val = '$SCOPE';
}
....
}
If you want to access it anyway, you can use a workaround like this, as $scope refers to 'this' in Angular templates.
<div ng-repeat="(k, v) in ($$=this)">
<div ng-if="k!='$$' && k!='this'">key: {{k}}
<pre ng-bind="$$[k]|json:4"></pre>
</div>
</div>
You can see the full snippet and example here
var app = angular.module('app', [])
.controller('TestCtrl', function ($scope) {
$scope.foo = {
bar: "test bar",
foobar: "test foobar"
};
$scope.zzz = {
bar: "test bar",
foobar: "test foobar"
};
});<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="app">
<div ng-controller="TestCtrl">
<div ng-repeat="(k, v) in ($$=this)">
<div ng-if="k!='$$' && k!='this'">key: {{k}}
<pre ng-bind="$$[k]|json:4"></pre>
</div>
</div>
</div>
</div>Alternatively, if you want to retrieve $scope as a single object in JSON format, you can do it like this or check out the example here
<div ng-init="$scope={}">
<div ng-repeat="(k, v) in ($$=this)" ng-init="$scope[k] = $$[k]" ng-if="k!=='$$'&&k!=='this'&&k!=='$scope'">
</div>
</div>
<pre ng-bind="$scope|json:4"></pre>
This will output:
{
"foo": {
"bar": "test bar",
"foobar": "test foobar"
},
"zzz": {
"bar": "test bar",
"foobar": "test foobar"
}
}
I just started learning angularjs and I'm struggling with closing the search results when clicking on the "Close search result" span. Below are snippets of my code. Can someone please guide me on how to achieve this functionality? Screenshot: HTML: ...
I've exhausted all my options in trying to find a way to trigger a button that saves the page upon exit, but it never seems to work. I need the event to occur even if the button is not visible at the time of the page exit. The new security protocols o ...
The structure of the code is as follows: var express = require('express'); var router = express.Router(); var mongo = require('mongodb').MongoClient; function getData(){ db.collection("collection_name").find({}).toArray(function (er ...
Every time I execute the command: npx react-native run-android An error message is displayed as follows: Error: EPERM: operation not permitted, scandir 'C:/Users/ . . . /node_modules/react-native-gesture-handler/android/... Even after running the C ...
I've been struggling to implement an upload progress bar using the XMLHttpRequest level 2 support for progress events in HTML5. Most examples I come across show adding an event listener to the progress event like this: req.addEventListener("progress ...
Greetings! I am a newcomer to the world of web development and I am seeking a method to showcase file content on a webpage. Presently, I have succeeded in loading text file content and displaying it in a large text box. However, I am now interested in di ...
Working with Upnp in TabrisJs seems to be a bit challenging. Even though it has good support for node packages, I am facing difficulties while dealing with Upnp. I included node-upnp-client in my package.json file. "dependencies": { "tabris": "^2.0 ...
I am currently in the process of developing a website utilizing Zend Framework 2 in combination with AngularJS. The backend consists of a restful webservice running on ZF2, while AngularJS is used on the client side to interact with this webservice. My ne ...
I am currently developing a program that randomly selects 5 words from a database and inserts them into an array. Although the page loads correctly initially, nothing happens when the button is clicked. None of the alerts are triggered, suggesting that the ...
Each time I come across the term Functional Reactive Programming, it becomes apparent that my grasp of its meaning is elusive. After revisiting this thought-provoking article about Functional Reactive Programming, I convince myself that I understand it onl ...
Trying to utilize JavaScript in looping through a JSON file containing time periods (start date/time and end date/time) to determine if the current date/time falls within any of these periods. The provided code doesn't seem to be working as expected. ...
I recently implemented an event listener for selectionchange in the following manner: document.addEventListener("selectionchange", function() { highlight(); console.log("selectionchange-triggered"); }, false); After that, I included the code bel ...
Here is a preview of my HTML code : <form action="form2_action.php" method="post"> <table> <tr> <td>First Name </td> <td>:</td> <td><input type="text" id="f ...
I need to specify the class attribute in my directive. This is how I am currently attempting to do it: This is the relevant code in the directive template: '<input class="myClass" />' scope:{ myClass = '@' } And this is how I ...
How can I extract data based on timestamps greater than 06? "use strict" const data = [ {timestamp: "2020-04-23 05:05", totalAvg: 2.596211180124224}, {timestamp: "2020-04-23 05:10", totalAvg: 3.22052273203436}, {timestamp: "2020-04-23 05:15", t ...
I am attempting to utilize chart.js (newest version) to generate a pie chart. I have constructed an array that I intend to use as the data input for the chart. This is the PHP code snippet: <?php if($os != null) { $tiposOs = array('Orçamento ...
I am currently facing an issue where some images in my asset folder are not displaying properly when I convert my HTML/CSS/JS template to Wordpress. The main problem is with the image that should show up when you first visit the website. Below is the CSS c ...
Check out the code snippet below: canvas = document.getElementById("canvas"); ctx = canvas.getContext('2d'); tmp_ctx = element[0].getContext('2d'); element.bind('mousemove touchmove', function(event){ if(draw ...
I am encountering an issue with the normal input fields on my page: https://i.stack.imgur.com/qigTr.png Whenever I click on the "+" button, it triggers an action which in turn calls a service class with simple JSON data. My intention is to set selectionC ...
In C#, the concept of inheritance can be easily demonstrated through classes like Animal and Dog. class Animal { string name; public Animal() { } } class Dog : Animal { public Dog() : base() { this.name = "Dog"; } } When working ...