# PSA: Gotchas with JSON.parse on note fields

**URL:** <https://forums.ankiweb.net/t/psa-gotchas-with-json-parse-on-note-fields/52205>\
**Category:** Card Design\
**Created:** [November 21, 2024, 5:30pm UTC](https://forums.ankiweb.net/t/psa-gotchas-with-json-parse-on-note-fields/52205 "2024-11-21T17:30:51Z")\
**Posts on this page:** 2\
**Page:** 1

<div class="post-metadata">

**Author:** ![jhhr](https://sea2.discourse-cdn.com/flex002/user_avatar/forums.ankiweb.net/jhhr/32/21339_2.png) [@jhhr](https://forums.ankiweb.net/u/jhhr)\
**Post date:** [November 21, 2024, 5:30pm UTC](https://forums.ankiweb.net/t/psa-gotchas-with-json-parse-on-note-fields/52205/1 "2024-11-21T17:30:51Z")

</div>

Here’s a PSA for all the heavy javascript users. This bug was pretty hard to debug since reading the template code didn’t show the problem.

# Intro

For reasons, you want to store some data in JSON format in your note fields, which you will then parse with javascript in the card template and do stuff.

**My\_JSON\_note\_field:**

```json
{ "some_key": "some_value" }

```

**Script:**

```auto
// This will work, since the content was already a valid object literal
// But is of course dangerous, since your code will crash if there's a syntax error in the field content
var myData = {{My_JSON_note_field}}

```

So, you use some `try / catch` and `JSON.parse` to let the rest of your code run in the case of an error:

```auto
// Safe! maybe...
var myData;
try {
   myData = JSON.parse("{{My_JSON_note_field}}");
} catch {
   // handle error
}

```

# The problem

The above is fine… as long as your JSON content is a single line! Consider this:

**My\_JSON\_note\_field:**

```json
{
  "some_key": "some_value",
}

```

The reason you’d format the json with linebreaks would be to make making manual edits easier.

**Script after replacement is done:**

```auto
// Safe! maybe...
var myData;
try {
   myData = JSON.parse("{
  "some_key": "some_value", <--- Oops
}");
} catch {
   // handle error
}

```

Because of the linebreaks, the string syntax is broken and the code will crash despite the try/catch.

The first code would’ve actually worked because the content is still a valid object literal…

```auto
// This will work, since the content was already a valid object literal
// But is of course dangerous, since your code will crash if there's a syntax error in the field content
var myData = {
  "some_key": "some_value",
}

```

# The solution: use `` instead of “”

**Script:**

```auto
// Crashproof!
var myData;
try {
   myData = JSON.parse(`{{My_JSON_note_field}}`);
} catch {
   // handle error
}

```

**Script after replacement:**

```auto
// Crashproof
var myData;
try {
   myData = JSON.parse(`{
  "some_key": "some_value",
}`);
} catch {
   // handle error
}

```

Now the template literal will nicely handle any multi-line strings.

The next gotcha would of course be your content containing template literal variable syntax, but that will actually be caught in the try/catch.

**My\_JSON\_note\_field:**

```json
{
  "some_key": "${why_would_you_do_this_though}",
}

```

**Script after replacement:**

```javascript
// Crashproof!
var myData;
try {
   myData = JSON.parse(`{
  "some_key": "${why_would_you_do_this_though}",
}`);
} catch {
   // A ReferenceError will be caught due to why_would_you_do_this_though not being defined
}

```

---

<div class="post-metadata">

**Author:** ![system](https://us1.discourse-cdn.com/flex002/uploads/anki2/original/1X/8f1279ababc5879d54e4838989f606cfe55af8c7.jpeg) [@system](https://forums.ankiweb.net/u/system)\
**Post date:** [December 21, 2024, 5:31pm UTC](https://forums.ankiweb.net/t/psa-gotchas-with-json-parse-on-note-fields/52205/2 "2024-12-21T17:31:16Z")

</div>

This topic was automatically closed 30 days after the last reply. New replies are no longer allowed.
