When using JSON.stringify, the output is null. However, when using document.write, the data

I am currently working on a plugin for crawljax that involves executing some JavaScript code, similar to the following:

String result = browser.executeJavaScript(script).toString();

The script code is as follows:

function getElementPosition(id) {
var element = document.getElementById(id);
return JSON.stringify(elementpos(findPosX(element), findPosY(element)));
}

function elementpos(x, y) {
elementpos = new Object();
elementpos.x = x;
elementpos.y = y;
return elementpos;
}


return getElementPosition("foo");

While this seems to run successfully, the result always comes back as null. Strangely enough, if I print out the same data using document.write, I receive a well-formatted JSON string like this:

{"x":8, "y":24}

Could it be that I am misunderstanding something? Is there some issue when dealing with JSON strings and Java? Since I don't have much experience in JavaScript, could it be that I am not permitted to return data in this manner?

I am carrying out these tests on Google Chrome version 25.

Note: I do not believe this problem is related to Crawljax itself since another plugin (written by someone else) utilizes a script that returns a JSON string without any issues...

javajavascriptjsongoogle-chromestringify

Answer №1

When it comes to JavaScript, steer clear of new Object();. Instead, opt for a simpler solution like the one provided below:

 return JSON.stringify({x:findPosX(element), y:findPosY(element)});

Avoid using objects created with the new Object(); syntax as they can lead to numerous unexpected issues in JavaScript.

Answer №2

It appears that the issue does not lie with using new Object(), but I welcome any clarification from other commenters. Consider this alternative approach:

function findElementPosition(x, y) {
    var elementPosition = new Object();
    elementPosition.x = x;
    elementPosition.y = y;
    return elementPosition;
}

It's worth noting that adding "var" before "elementPosition = new Object();" is crucial. Without this variable declaration, the initial line of the universal "findElementPosition" function would simply replace itself with an "elementPosition" object. While it may work correctly the first time, subsequent executions could lead to errors as it attempts to interpret the new Object() result as a callable function.

I successfully ran the provided code and converted the output to a string without encountering any issues on Chrome 40. Changing the local variable name from "result" to something distinct from the function name could help eliminate potential confusion in this scenario.

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

JavaScript code to output CSS styled text: "echo"

Implementing anti-adblock on my site was necessary, as my bitcoin faucet relies on ads to function. I wrote some code to detect adblock on the client's browser: function TestPage() { if ($('.advertisement').height() == 0) var advertisement ...

javascriptjquerybitcoinadblock

The event listener activates multiple times on HTML pages that are dynamically loaded with AJAX

Javascript utility function: // This event listener is set using the on method to account for dynamic HTML $(document).on('click', '#next_campaign', function() { console.log('hello'); }); Website layout: <script src=&q ...

javascriptjqueryajax

Do you notice a discrepancy in the number returned by Javascript's Date.getUTCDate() when the time component is set to

Consider the following code snippet: const d = new Date('2010-10-20'); console.log(d.getUTCDate()); If you run this, the console will output 20. However, if you modify the code like so: const d = new Date('2010-10-20'); d.setHours(0, ...

javascripttypescript

When trying to access Ajax fetched data within a VueJS `router-view`, the `$root` object returns undefined only when navigating directly to

As I familiarize myself with vuejs, I decided to challenge myself by creating a webpage similar to an eshop for practice purposes. My approach involves fetching all the necessary data in a single api call to ensure easy access from all my router-views for ...

javascriptajaxvue.jsvuejs2vue-router

Navigating to a different URL in a remoteMethod with Loopback and Express

Can anyone provide any guidance on how to redirect to a URL within a model function or remoteMethod? I've been struggling to find documentation on this. Here is the code snippet for reference: Model Function (Exposes /catch endpoint) Form.catch = func ...

javascriptexpressloopbackjsloopback

Default page featuring an AngularJS modal dialog displayed

I am attempting to display a modal popup dialog using an HTML template. However, instead of appearing as a popup dialog, the HTML code is being inserted into the default HTML page. I have included the controller used below. app.controller('sortFiles&a ...

javascriptangularjs

Unique Fragments with AstroJS

Recently delving into learning AstroJS, I stumbled upon some intriguing templates on GitHub. One thing that caught my attention was the <Fragment> tag which seemed to be related to directives based on the astro documentation. Below is a snippet of th ...

javascriptnpmtailwind-cssastrojs

utilizing the entire string rather than just a portion

I was attempting to create a JavaScript jQuery program that vocalizes numbers based on some previously saved data. However, I encountered an issue where only the last number in the sequence was being played (the final character in the string). Below is t ...

javascriptjqueryhtml

jQuery removes HTML tags from XML documents

I currently have a setup where a page is functioning as an AJAX loader with the help of jQuery. It is designed to retrieve XML documents, like the one shown below, and then place the values of title, authPhrase, and content into the appropriate div element ...

javascriptxmljquery

Creating dynamic layouts using Handlebars.js recursion

I'm working with a basic object hierarchy that includes: Category String name List childCategories; My goal is to use handlebars to represent this structure in a generic manner, but I'm struggling on how to nest layouts. Here's the curre ...

javascriptjsontemplates

What is the best way to conceal a bootstrap directive tooltip in Vue.js for mobile users?

Currently, I'm tackling a project with Vuejs and Laravel. There's a tooltip directive incorporated that relies on Bootstrap's functionality. Check it out below: window.Vue.directive("tooltip", function(el, binding) { // console ...

javascripthtmlcssvue.js

What causes the form to be submitted when the text input is changed?

I'm puzzled by the behavior of this code snippet that triggers form submission when the input value changes: <form> <input type="text" onchange="submit();"> </form> Typically, I would expect something along t ...

javascripthtml

Managing file responses in Node.js

Hey there! I've been working on implementing ajax image upload and here's how far I've gotten. This is my index.html: <!DOCTYPE HTML> <html lang="en-US"> <head> <meta charset="UTF-8> <title>File Upload ...

javascriptnode.jsexpress

JSON structure containing both lists and dictionaries within each other

I am struggling with the extraction of a nested JSON data into a dataframe that follows this specific structure: [ {'id': '1','sort': 'kg', 'name': 'meal','detail': [ {'s ...

pythonjsonpandasdataframenormalize

Masonry layout organizes images in a vertical stack, with one image per row

After implementing Masonry on my website, I encountered an issue where all the images stack vertically in a single row once the page loads. Instead, I would like them to stack both horizontally and vertically. You can view the problem on My Jsfiddle. This ...

javascriptcsstwitter-bootstrapjquery-masonrymasonry

Please upload JSON data into a database using Node.js

As a beginner in learning node.js, I have embarked on my "Hello World!" project. The premise is simple - I am requesting a JSON file from the server via an API and receiving a response that looks like this: { "files": [{ "url": "http://auction ...

javascriptjqueryjsonnode.js

Could there be a scenario where the body onload function runs but there is still some unexec

I am feeling confused by a relatively straightforward question. When it comes to the <body> tag being positioned before content, I am wondering about when the body onload function actually runs - is it at the opening tag or the closing tag? Additio ...

javascripthtmlonload

Do specific elements of typography adjust according to the size of the window?

I'm always amazed by the creative solutions that come out of this community. So I'm reaching out to see if anyone knows a way to achieve something unique with CSS! Specifically, I'm curious if it's possible to make certain horizontal p ...

javascripthtmlcsstypography

Knockout.js client-side validation system

Currently working on a sophisticated client-side web application and I'm in search of the perfect framework for handling validations. I experimented with JQuery validation plugin, but unfortunately it didn't integrate smoothly with knockout.js da ...

javascriptvalidationknockout.jsclient-side-validationrich-client-platform

Obtaining the keys of an array from a JSON input

I have an array called $json that I need to work with in PHP: $json = json_decode(' {"entries":[ {"id": "29","name":"John", "age":"36"}, {"id": "30","name":"Jack", "age":"23"} ]} '); What I am trying to achieve is to create a PHP "for each" loo ...

phparraysjsonforeach