There was an issue with parsing the json data using the JSON.parse() function

Question

There was an issue with parsing the json data using the JSON.parse() function

Utilizing the json_script template tag in Django, I am obtaining a JSON from a context view.

The JSON is received as follows:

{{rules|json_script:"rules"}}

<script lang="javascript">
    const rules = JSON.parse($('#rules').text())
</script>

This is what I get from {{rules|json_script:"rules"}}

<script id="rules" type="application/json">{"id": 10, "string": "demo", "profile": "Alumno Demo", "license": "Licencia no facturable por usuario demo", "field": "codigo_usuario", "include": true, "order": 1, "uppercase_sensitive": false, "dateadded": "2020-05-11T08:06:35Z", "billable": false}</script>

However, when attempting to parse with JSON.parse, an error is encountered:

VM760:5 Uncaught SyntaxError: Unexpected token R in JSON at position 5

What could be the issue? Upon copying the script content, it appears to be a valid JSON format.

Your insights are greatly appreciated!

javascript json django

Answer 1

Answer №1

When you use $('#rules').text(), it actually returns a jQuery n.fn.init function.

If we take a closer look at the jQuery library code:

`var jQuery = function( selector, context ) {
   return new jQuery.fn.init( selector, context );
};`

You'll see that it will return an empty function if it can't find an element in the DOM.

Here are some solutions:

1. You can use basic JavaScript method getElementsByTagName like this:

document.getElementsByTagName('script')

This will give you an array of script elements. In your case, there are 2 elements and you can access the text attribute to get the contents of the script tag.

JSON.parse(document.getElementsByTagName('script')[0].text)

2. Another option is to declare a variable in your script and parse JSON like this:

var stringifiedJson = {"id": 10, "string": "demo", "profile": "Alumno Demo", "license": "Licencia no facturable por usuario demo", "field": "codigo_usuario", "include": true, "order": 1, "uppercase_sensitive": false, "dateadded": "2020-05-11T08:06:35Z", "billable": false};
JSON.parse(stringifiedJson);

Answer 2

When you use $('#rules').text(), it actually returns a jQuery n.fn.init function.

If we take a closer look at the jQuery library code:

`var jQuery = function( selector, context ) {
   return new jQuery.fn.init( selector, context );
};`

You'll see that it will return an empty function if it can't find an element in the DOM.

Here are some solutions:

1. You can use basic JavaScript method getElementsByTagName like this:

document.getElementsByTagName('script')

This will give you an array of script elements. In your case, there are 2 elements and you can access the text attribute to get the contents of the script tag.

JSON.parse(document.getElementsByTagName('script')[0].text)

2. Another option is to declare a variable in your script and parse JSON like this:

var stringifiedJson = {"id": 10, "string": "demo", "profile": "Alumno Demo", "license": "Licencia no facturable por usuario demo", "field": "codigo_usuario", "include": true, "order": 1, "uppercase_sensitive": false, "dateadded": "2020-05-11T08:06:35Z", "billable": false};
JSON.parse(stringifiedJson);

There was an issue with parsing the json data using the JSON.parse() function

Answer №1

Similar questions

Utilizing quotation marks in ASP MVC4 when accessing Model values

Unable to pass data from a Jquery ajax request to another function

The TypeConverter attribute in JsonConvert.SerializeObject() does not support conversion of the specified model in

Django import failed, was functioning properly the previous week

Serialization of dictionary containing intricate objects into JSON format

Converting objects to arrays of objects in LuaScript-KrakenD: A guide

Continue executing without stopping

Is the runTest.ts class in the vscode-test setup ever utilized in the project? Its purpose remains unclear even in the example project

Dark opaque background image with Material-UI styling

In JavaScript, I am looking to duplicate an image and place it back at its original location after it has been moved from its initial position

Why is it that vue-cookies are functioning properly in one view, yet not in another?

Using JavaScript to parse Java objects into JSON data

Alert: Zone.js has identified that the ZoneAwarePromise '(window|global).Promise' has been replaced with polyfills. Kindly address this issue

Setting color values for each pixel of a createGraphics object using P5.js

Utilizing Cookies in Django Middleware

What techniques can be used to avoid the MUI `DataGrid` from constantly re-rendering when a row is committed?

NoReverseMatch error occurred while trying to access the /NewListing page

Issues with retrieving the subsequent anchor element using Jquery Slider

Show the advancement of a process as it runs in a pop-up window

Tips for managing numerous HTTP requests in Angular 6