Is there an easy method to transmit JSON information by utilizing $window.open() with angularjs?

equivalent to unraveling a knot:

var data = {
    name: 'name',
    info:{
        info1: 'uvbiuonns',
        info2: 'aisbsiece',
    }
}

this approach eliminates the need to retrieve data from the server for the popup

Answer №1

let information = {
    title: 'title',
    details:{
        detail1: 'sdughonns',
        detail2: 'cjsbsecje',
    }
}

let convertToQueryString = function(obj, prefix){
  let stringArr = [];
  for (let prop in obj) {
    let key = prefix ? prefix + "[" + prop + "]" : prop, 
        value = obj[key];
    stringArr.push(angular.isObject(value) ? convertToQueryString(value, key) : (key) + "=" + encodeURIComponent(value));
  }
  return stringArr.join("&");
}

window.open("popup.html/?" + decodeURIComponent(convertToQueryString(information)), "winName", "width=200, height=100");

Additionally, the jQuery alternative is available:

window.open("popup.html/?" + decodeURIComponent($.param(information)), "MsgWindow", "width=200, height=100");

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Issue with MUI Autocomplete not showing selected name on initial option selection

I encountered a strange issue with the Autocomplete component from Material UI. Here is the code snippet in question: const [isContactListInitialised, setContactListInitialised] = useState(false); const toggleContactListInitialized = () => { setContactL ...

A guide to easily deconstructing props in a Vuejs template

In Vuejs How to destructure props and improve code readability I understand that with v-for="({y}) in x" we can destructure, but in this particular scenario there is no v-for <template> <div>{{candidate.gender.gender.gender_name}}</div> ...

What are some practical ways to employ optional chaining when working with arrays and functions?

I'm attempting to implement optional chaining with an array instead of an object but I'm unsure how to proceed: Here's my attempt at using it myArray.filter(x => x.testKey === myTestKey)?[0]. I am also experimenting with a similar approa ...

Counting in jQuery with duration intervals between numbers

My goal is to create a number counter that can either count up or down, such as from 1 to 100 or from 100 to 1. While I have come across several plugins that offer this functionality, they all contain a duration variable that dictates how long it takes to ...

Use vanilla JavaScript to send an AJAX request to a Django view

I'm attempting to make a GET AJAX request to a Django view using vanilla JS. Despite passing is_ajax(), I am having trouble properly retrieving the request object. Below is my JavaScript code. Whether with or without JSON.stringify(data), it does not ...

Managing unanticipated errors in Express while utilizing async/await mechanics

Consider this TypeScript code snippet: app.get('/test_feature', function (req: Request, res: Response) { throw new Error("This is the bug"); }); app.use(logErrors); function logErrors (err: Error, req: Request, res: Response, next: NextFun ...

Syntax error: Your code encountered an unexpected closing curly brace

Here is the code snippet I am working with: <?php session_start();?> <!DOCTYPE html> <html> <head> <title>Narcis Bet</title> <meta charset="utf-8"> <link rel="stylesheet" href="css/style.css" type="text/css"&g ...

Encounter the error "Attempting to access object using Object.keys on a non-object" when attempting to retrieve all fields in request.body in Node.js?

I am working with a piece of code that handles the PUT method: module.exports.addRoutes = function(server) { //PUT server.put('/api/public/place/:id', function(request, response) { //this is just for testing, please do not care ...

Angular and React: A Comparison of Their Binding Mechanisms

As I embark on my journey with React, I've grasped the concept of binding "this" in React. However, I'm puzzled about how Angular manages "this". React class Product extends React.Component { a= "mdb" constructor(props) { super( ...

TimePicker Component for ASP.Net MVC with Razor Syntax

I'm currently working on implementing a TimePicker using Razor and JQueryUI in my bootstrap website. While I have successfully created a DatePicker, I am facing difficulties in creating a separate TimePicker using two different TextBoxes instead of se ...

Is it truly possible to return a reactive variable that updates its value asynchronously?

While reviewing the code of a frontend project developed in Vue3, I came across a unique construction that I have not encountered before. This has led to some confusion as I try to grasp how it operates. The concept involves assigning the result of an asyn ...

``There is an issue with getServerSideProps when wrapping it in a

When attempting to implement an auth handler function around getServersideProps, I encountered the following error message: TypeError: getServerSideProps is not a function The wrapper code in question is as follows: export async function protect(gssp) { ...

Deleting uploaded images in Cloudinary for Next.js is not allowed

After successfully implementing image uploads in cloudinary for Next.js, I encountered an issue with image deletion. Despite creating the necessary routes and components, the deletion functionality is not working as expected. I am unsure of what could be ...

A mysterious property appearing in a Webpack plugin

Here is my webpack configuration file and package.json. When I execute the command webpack -w, I encounter the following error (shown below). I suspect it may be related to path strings. Any help would be greatly appreciated. webpack.config.js const HtmlW ...

How can I configure Selenium to test a URL that requires a password for access?

Is there a setting within the 'wdio.conf.js' file that allows for automated testing on a URL with password protection? ...

Please indicate the number of lines for the href within the span element

I'm struggling with formatting a <span> tag, specifically the .lastMessageLink class that contains an <a> element with the .lastMessageText class. The content within .lastMessageText can vary from just a few characters to a lengthy paragra ...

Guide to setting up onChange and values for a textField within a table in React using material ui

To view the code snippet, click here: https://codesandbox.io/s/proud-snowflake-d2054?file=/src/App.js I'm currently working with a Nested Array and need help reading the values entered inside a table. Additionally, I have the ability to add new text ...

Sharing information from child to parent controller in AngularJS through data push

I encountered an issue while attempting to push a cities object to an array in the parent controller. The error message displayed was "Cannot read property 'push' of undefined". Is there a solution to this problem? The ChildCtrl is embedded with ...

Using Angular Spinners without relying on the timeout function

Encountering an issue with the angular spinner. I have an update button integrated with spin and loading, but it needs to stop after saving data into the database without utilizing any timeout function. function assignLectureToSubject(subject) { ...

Is your JS code moving forward without waiting for the Promise to get resolved?

I am facing an issue with my application where it is not waiting for the promise to return before executing other code that depends on the data. I have tried using then() but the next code is still being executed before the values are returned. In my setu ...