I'm currently working on a button that triggers a POST call to retrieve a json response from the server. My goal is to display this json response in a new (chrome) browser tab.
Here's what I have so far using Angular:
$http.post(url, data)
.then(function(res) {
$scope.toJSON = angular.toJson(res.data);
var blob = new Blob([$scope.toJSON], { type: "application/json;charset=utf-8;" });
var downloadLink = angular.element('<a></a>');
downloadLink.attr('href', window.URL.createObjectURL(blob));
downloadLink.attr('target', '_blank');
downloadLink[0].click();
})
Although this code successfully opens a new tab with the json content, it doesn't seem to be recognized as pure json. For instance, my Chrome extension (JSONView) which typically formats json data nicely, does not do so here.
If it helps, the URL of the new tab looks something like this:
blob:chrome-extension://knecfkbfhnkfajaonlnodhpjpbbpjfcp/c3b7e4dc-8209-4d0f-8f79-d8ba25e960a2
I've experimented with various chrome extensions for viewing json, but they all exhibit the same issue. It appears that these extensions are unable to process pages starting with "blob:chrome-extension://".
Therefore, I'm seeking guidance on the correct approach to opening and displaying json data in a new tab.
Clarification: Please note that my intention is not to show this json data on the current page, but rather in a separate tab. Additionally, this code snippet is part of a Chrome Extension, not a standard web page.