Using double quotes in a label triggers a browser error displaying "Invalid Label"

Recently, I encountered issues with my browser while parsing JSON return data from the server. Initially, I assumed it was related to my specific data, but even a simple example like

{"a": 1}

led to an error "invalid label" in Firefox and "SyntaxError: Unexpected token :" in Chrome. Interestingly, when I removed the double quotes around the label as shown below:

{a:1}

(eliminating the double quote marks), the issue disappeared. However, I am confident that the JSON is valid even with the double quotes (as validated by JSONLint).

The workaround recommended was wrapping the JSON object with brackets like this:

({"a":1})

This solution worked in the browser console, but not when attempting to modify the server data in response to a JSONP call. Unfortunately, due to using a library (Dojo), I didn't have the ability to intercept the parsed data before its processing.

UPDATE

Upon further investigation, I discovered a bug in my server code where the data wasn't properly enclosed in a JavaScript function for the JSONP response. This adjustment resolved the issue, and consequently, I will be removing this question. My apologies, and thank you for the responses provided nevertheless.

Answer №1

{"x": 10}

standing alone is not a JSON format, it's considered a block.

In this context, "x": would serve as a jump label for continuation. Labels like these are written without the use of quotation marks.

On the other hand, using parentheses such as ({"x":10}) results in an expression. Therefore, {"x": 10} will be interpreted and parsed as JSON data.

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

What is the method for shifting content as the window is resized to ensure it remains in its original position?

My page features a grid with three div elements. Each div is the size of the viewport, resulting in only one div being visible at a time, while the other two remain outside the view. This makes the grid three times larger than the viewport. When resizing ...

Error in canvas-sketch: "THREE.ParametricGeometry has been relocated to /examples/jsm/geometries/ParametricGeometry.js"

I recently started using canvas-sketch to create some exciting Three.js content. For my Three.js template, I utilized the following command: canvas-sketch --new --template=three --open The version that got installed is 1.11.14 canvas-sketch -v When atte ...

Is it possible to determine if the user is able to navigate forward in browser history?

Is there a way to check if browser history exists using JavaScript? Specifically, I want to determine if the forward button is enabled or not Any ideas on how to achieve this? ...

Mesh is making an excessive number of draw calls

After importing some mesh from Blender using the three.js exporter from the utils folder, I noticed that it only has 3 materials but is utilizing 28 draw calls. Why is this happening? I expected it to use only 3 draw calls. View mesh image ...

What is the method for including an inner wrapper around an element in Angular?

Is there a way to create an Angular directive that adds an inner wrapper to a DOM element without replacing the inner content? I have tried implementing one, but it seems to be replacing instead of wrapping the content. (view example) Here is the HTML sni ...

When creating a database for items, which option is more beneficial: using scriptable objects or storing the data in XML

Hey everyone, I've been toying around with the concept of developing an item database. I'm curious to know which option you think would be more practical and user-friendly. If anyone has a list of pros and cons for either, please share them with ...

What steps are involved in adding an image to an autocomplete script?

I need help adding an image to my autocomplete script. Below is my code that I'm struggling with. My Controller: function getsearch($c_id) { $searchTerm = $_GET['term']; $query = $this->db->query("SELECT state_name FROM state ...

Validate the button's status in Ionic

When I click on a button, I am trying to retrieve the Toggle state immediately. However, I consistently receive a value of true, even when my toggle is actually set to false. I believe the issue lies in how I am manipulating the DOM. Here is an example ...

Is it possible to match a field with an array field in a query?

Imagine having a collection structured like this: { film : 1, Items : [ 1 , 2 ,5 , 6 ] }, { film : 2, Items : [ 3, 5, 7 ] }, { film : 3, Items : [ 1, 3, 6 ] } I am looking to retrieve all entries where the 'film' is included i ...

Activate Bootstrap to insert a div underneath an anchor tag

I need assistance with positioning the div content directly below the li a tag. Is there a way to accomplish this? Check out the FIDDLE $(document).ready(function() { $('.nav ul li:first').addClass('active'); $(&apos ...

The most effective way to separate `$watch` functions from your controllers

As I was searching for examples of best practices when it comes to moving $watch functions from a controller to a factory, I discovered that there isn't a consensus on the ideal approach. Some suggest injecting $rootScope into a factory and setting up ...

Determine the corner points of the DOM element following the application of CSS transforms such as rotateX, rotateY, and perspective

To achieve the transformative effect on elements, I utilize rotateX, rotateY, and perspective properties. By using getBoundingClientRect(), I am able to retrieve details such as top, left, bottom, right, width, and height of an element. Is there a method ...

Logo remains in place when scrolling halfway down the page

I have a logo that I want to stay halfway up the home page when scrolling, as if fixed in place until it reaches the footer. body { background-color: #fff; margin: 0; } nav { position: sticky; top: 0; width: 300px; height: 80px; margin:4 ...

How can we use vanilla JavaScript to implement an image zoom effect on mouse movement?

I'm attempting to implement an onmousemove event within an image that displays a zoomed image on the right side. Issue: When I move my mouse inside the image, the black box and zoomed image flicker. The zoomed image does not align correctly in the b ...

Finding out which carousel the user is currently engaging with in the Slick Carousel can be accomplished by following these steps

I am struggling with applying a class to the carousel container when the first slide is active in a page that contains multiple Slick carousels. Is there a way to update the code below so that the class is only applied to the specific carousel the user is ...

Utilizing Vue Js and Query to retrieve data from a Jira Rest API endpoint

Trying to utilize the JIRA REST API within a Vue.js application has presented some challenges. After generating the API key, I successfully ran an API request using Postman. Initially, I attempted to use the axios client, but encountered issues with cross ...

Encountered an issue with reading null properties when trying to access 'defaultPrevented' in bootstrap 5 toast

Implementing a custom hook to display and hide toast messages is working perfectly fine when invoking showToast in the button component of the Toast, but encountering an error when using this hook outside, for example in the button component of the App. Ty ...

Converting JSON arrays into structured arrays using Spark

Does anyone know how to convert an Array of JSON strings into an Array of structures? Sample data: { "col1": "col1Value", "col2":[ "{\"SubCol1\":\"ABCD\",\"SubCol ...

Utilize Paper.js PointText to Obtain Baseline Coordinates instead of Starting from the Bottom Left Corner

Check out this Paper.js sketch. Click on "TEXT" to view the bounding box. It's worth noting that I configured the leading property to match the font size, though by default it is typically 1.2 times the font size as stated in the documentation. Why d ...

The problem of undefined icons in Material UI's Stepper StepLabel

Having some trouble incorporating a custom Step Label Icon within the nodes of the Stepper Component provided by Material UI. I want to add an icon to each circle, similar to what is shown in this Material UI demo: https://i.sstatic.net/WLOcS.png However, ...