DEV Community: Manish

JSON.parse() kept failing with Ollama responses on localhost - spent 3 hours debugging, here's what worked 💪

Manish — Tue, 02 Sep 2025 04:58:07 +0000

Integrating llama3.2 into my internal tools has been one of the most sane parts of AI that I’ve been doing for the past few months, but last week it went insane. The API was responding perfectly, requests were perfectly hitting the desired endpoints, and when I checked my console, the JSON responses looked pristine 👌.

But every single time I tried to parse the response, it would throw me a weird parsing error, which made no sense. The API was giving 200 status codes, the content-type header was set perfectly, so what else could go wrong?. In this guide, we will discover how I finally tracked down this sneaky JSON parsing bug that was hiding right under my nose.

Summary

While integrating llama3.2 into one of my internal tools, I faced a bizarre JSON.parse() issue:


Expected ',' or '}' after property value in JSON at position 350 (line 11 column 23)

At first glance, I thought it would be a simple fix, but I was wrong. This mentality drove me to spend endless hours debugging, starting with consoling the output I was receiving from the Ollama.

Solution

Glimpsing at the response (without properly looking at it), I thought a simple JSON.parse() would fix the issue.

But then I noticed something else: two different syntactical outputs for two different inputs. But Why?

That’s the point when I started to look into my prompt, which I was giving to llama3.2:


## Assessment Guidelines:

    1. **Be Conservative**: Err on the side of caution - if something could be interpreted as a violation, factor that into the risk score
    2. **Context Matters**: Consider the subreddit's culture and typical moderation practices
    3. **Cumulative Risk**: Multiple minor issues can compound into a higher risk
    4. **Moderator Discretion**: Remember that human moderators may interpret rules differently
    5. **Recent Trends**: Consider if the content type has been problematic recently

    ## Special Considerations:

    - **New Accounts**: Higher scrutiny for promotional content
    - **Community Guidelines**: Factor in Reddit's site-wide rules
    - **Subreddit Size**: Larger subreddits often have stricter enforcement
    - **Content Type**: Images, links, and text posts may have different risk profiles
    - **Timing**: Some content may be temporarily restricted during certain events

    **Subreddit Rules:**
    ${
      Array.isArray(subredditRules) && subredditRules.length > 0
        ? subredditRules
            .map((rule, index) => {
              // Handle different possible rule structures
              const ruleNumber = rule.number || rule.priority + 1 || index + 1;
              const ruleTitle =
                rule.title ||
                rule.short_name ||
                rule.violation_reason ||
                `Rule ${ruleNumber}`;
              const ruleDescription =
                rule.description ||
                rule.description_html?.replace(/<[^>]*>/g, "") ||
                "No description provided";

              return `${ruleNumber}. ${ruleTitle} - ${ruleDescription}`;
            })
            .join("\n")
        : "No specific subreddit rules provided"
    }

    **Post Title:** ${postTitle || "No title provided"}

    **Post Body:** ${postBody || "No body content provided"}

    Now analyze the provided content and respond with a JSON assessment.`;

Notice the last line where I say: Now analyze the provided content and respond with JSON assessment

Seemed okay to me the first time I wrote it. But the time I zoomed in and tested it with different variations, it hit me. 💥

Basically, instructing Llama 3.2 to respond with a JSON assessment meant it would output only the JSON assessment, whether or not that JSON was valid.

So, tweaking the prompt a bit, instead of using JSON.parse(), solved the problem. Here is the final version of the prompt I used:


    ## Assessment Guidelines:

    1. **Be Conservative**: Err on the side of caution - if something could be interpreted as a violation, factor that into the risk score
    2. **Context Matters**: Consider the subreddit's culture and typical moderation practices
    3. **Cumulative Risk**: Multiple minor issues can compound into a higher risk
    4. **Moderator Discretion**: Remember that human moderators may interpret rules differently
    5. **Recent Trends**: Consider if the content type has been problematic recently

    ## Special Considerations:

    - **New Accounts**: Higher scrutiny for promotional content
    - **Community Guidelines**: Factor in Reddit's site-wide rules
    - **Subreddit Size**: Larger subreddits often have stricter enforcement
    - **Content Type**: Images, links, and text posts may have different risk profiles
    - **Timing**: Some content may be temporarily restricted during certain events

    **Subreddit Rules:**
    ${
      Array.isArray(subredditRules) && subredditRules.length > 0
        ? subredditRules
            .map((rule, index) => {
              // Handle different possible rule structures
              const ruleNumber = rule.number || rule.priority + 1 || index + 1;
              const ruleTitle =
                rule.title ||
                rule.short_name ||
                rule.violation_reason ||
                `Rule ${ruleNumber}`;
              const ruleDescription =
                rule.description ||
                rule.description_html?.replace(/<[^>]*>/g, "") ||
                "No description provided";

              return `${ruleNumber}. ${ruleTitle} - ${ruleDescription}`;
            })
            .join("\n")
        : "No specific subreddit rules provided"
    }

    **Post Title:** ${postTitle || "No title provided"}

    **Post Body:** ${postBody || "No body content provided"}

    Now analyze the provided content and respond with ONLY a valid JSON assessment. Fix any JSON formatting issues if there are any`;

Key takeaway

Always double-check your prompt before building something with it, because a wrong prompt can lead to hours of debugging problems that never should have existed in the first place.

Merging Branches with git #Part 2.

Manish — Sun, 29 Mar 2020 08:35:19 +0000

So here we are with part 2 of our merging branches with GIT. in this tutorial we will discuss what happens when you try to merge a branch which is way too ahead of its original branch(in our case it is the master branch).

So the setup is the same as in the previous tutorial. You can have a look at for reference.

Let's continue our journey on merging the branches.

For this tutorial, I have already made three commits in the branch 'gaurang'. You can see in the image below:

If you look carefully, you can see the current tip of our branch 'gaurang' is three steps/commits ahead of the master branch.

So, what will happen now? We will merge 'gaurang' with 'master'. But before merging let's have to compare the code of both branches.

Let's compare the code of two branches before merging:

branch 'master' :

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
  <!-- This is the change made by gaurang -->
<body >
  <!-- This is the change made by gaurang -->
  <p style="background-color: blue;">Blue is my favorite color</p>
  Just changed some Background Color of the Body
</body>
</html>

branch 'gaurang':

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body >
  <p style="background-color: blue;">Blue is my favorite color</p>
  Just changed some Background Color of the Body
  <p style="background-color: brown;">I hate Brown</p>
  <p style="background-color: chocolate;">I love Messi</p>

  <!-- This is the change made by gaurang -->
  <p style="background-color:crimson;">And I love Argetina</p>
  <!-- This is the change made by gaurang -->
</body>
</html>

So as you can see we have added three paragraphs in the body in branch 'gaurang'.

Before merging let's make sure to fetch the changes in the local copy of the 'master' branch. If you don't fetch the latest changes, git will ask you to do so. Let's fetch:

git fetch

As you can see we have the latest changes in our branch. Now we can continue merging the branches. Let's run the merge command:

git merge <branch-name>

where the is the name of the branch which is to be merged. In our case, it will be 'origin/gaurang'. So our command will look something like this:

git merge origin/gaurang

When you run the merge command the editor will ask for MERGE_MSG by opening the file with the same name on your Editor. You can type whatever MERGE_MSG you like. Once you have typed the command and closed the file the branches will be merged and you can see the changes in your code.

As you can see we didn't see any merge conflicts in this merge because both developers didn't make the changes in the same file. If there were changes in the same file then we would have/had received merge conflicts and we had to resolve the conflicts manually.

After that you have to run the git add and commit command subsequently as the tip of your master branch is still behind branch 'gaurang'.

git add.
git commit -m "Commit Message"

Then you need to push the changes as you would normally do:

git push origin master

Now you can see the tip of your master branch is in Sync with the branch 'gaurang'

That's it for this tutorial. We will talk about merging two branches and then syncing it with the master branch in the next tutorial.

Merging Branches with git.

Manish — Sun, 29 Mar 2020 06:42:41 +0000

If you are a newbie to programming you might come across a problem with merging your source code with another co-worker/person you are working with. It's like you have made some changes and pushed to your favorite version-control hosting platform and then someone has pushed the code to a new branch and now you have to manage the dirty process of merging their branches with yours. This tutorial deals with the same topic.

OK, Let's start.

So, let's first know what is Git?

Git, as specified by Wikipedia, is a distributed version control system for tracking changes in source code during software development.

In layman terms, it means that while you code you can save your changes with a message that probably reminds you of what work you had done.

Now, to demonstrate the merging process in Git, we need an application with some code in it. Let's make a new angular app by running the ng new command as follows:

ng new new git-example-for-devto

This command will generate a new application with a default component name AppComponent. The folder structure of our app looks like this:

our-project-name
|
--- e2e
|
--- node_modules
|
--- src
|
--- app
|
--- app.component.html
|
--- app.component.css
|
--- app.component.ts
|
--- assets
|
--- enviornments
|
--- other files

Now, we need to write some code in our app.component.html

For this tutorial, I have written some basic code as our main focus is on merging the branches rather than writing the code. Here is the code for this post:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Example</title>
</head>
<body >
  <!-- Changes from my computer -->
  <p style="background-color: black; color: white;">This text is from my computer</p>
  <!-- Changes from my computer -->
</body>
</html>

To demonstrate changes I made from my machine, I have enclosed the code around comments which says

<!-- Changes from my computer -->
Some Code here...
<!-- Changes from my computer -->

For remote machine, I will enclose the code around comments which says

<!-- Changes made by <person-name> -->
Some Code here...
<!-- Changes made by <person-name>-->

For Git to work properly it requires a version-control hosting platform where all your code is saved. A version-control hosting platform is a place where all the files of your code live.

For this tutorial we will use GitLab as our Hosting Platform, you can use whichever you like.

I have already set up my project so I won't go into detail in that. If you don't know how to set up a project under GitLab, you can have a look at this guide. So here is my project setup:

So, you can have a look there are two branches named 'master' (which is the default branch and 'gaurang' a branch pulled out from master. Now we will merge branch 'gaurang' with branch 'master'.

Before merging, we will make sure we have the latest pull of our code. For that we will execute the following command:

git fetch

This will fetch all the commits to your local working copy of your Source Code.

Now let's merge our two branches. For merging there will be two branches:

First, the branch in which we are merging the changes i.e. receiving branch i.e. master
Second, the branch which we will be merging i.e. gaurang.

The command for merging is:

git merge <branch name>

where the branch name is the branch which is to be merged i.e. 'gaurang'. Remember the here will be always the branch which is to be merged no the branch in which we are merging. Let's execute that command.

As you can see in the screenshot below git automatically tries to merge the changes but if two persons have made changes to the same file then it will show a 'MERGE CONFLICT' and the merge will fail. This means you have to resolve the conflicts yourself manually.

Let's do it.

As we can see in the screenshot the file in which merge conflict is there in src/app/app.component.html. Let's open that file.

After we have opened our file, we will see two types of changes denoted by:

- <<<<<<< HEAD(Current Change)
- >>>>>>> origin/gaurang(Incoming Change)

Current Change is the change that we have done in our master branch and our HEAD is currently at that change.

Incoming Change is the change that is done in another branch.

So, we have to accept either of the two to resolve the conflicts. So, the deciding factor in choosing which changes to keep is the latest change or the latest code. If the developer who is maintaining the branch named 'gaurang' has made the latest changes then that changes should be accepted and not the changes are done in the 'master' branch.

So, let's accept the Incoming change. You can accept the Incoming changes by clicking on the 'Accept Incoming Changes'

The Code before Accepting Incoming CHanges is:

https://paste.ofcode.org/zEtJmsw9ue89jNTpw23tqQ

The Code after Accepting Incoming Changes is:

https://paste.ofcode.org/3axvjm5ThdE2FfWjHvNnFQh

Once, you have resolved the merge conflict then you have to add the conflicted files:

git add <name-of-the-conflicted-file>

and commit the changes (as you would do normally)

git commit -m "COmmit message"

After that we need to push the changes to the receiving branch i.e. master:

git push origin master

After pushing if you see the Graph of the changes you will see something like this:

This means that our branches have been merged successfully.

Happy Coding.

The Complete Source Code for this project is available at Gitlab

P.S.: In the next tutorial we will see what if the current tip of the main branch is ahead of the feature branch.

Getting Started with Angular

Manish — Sun, 22 Mar 2020 04:25:51 +0000

First of All, what is Angular?

Angular is a open source typescript based framework used to develop Single Page Applications(SPA).

Okay, now what the heck is SPA?

This was the question, i stumbled upon when i first started learning Angular. So Single Page Application(SPA) is a advanced approach where the data is not rendered statically from HTML pages but through JavaScript(in our case , typescript).

Now, How do we get started with Angular?

To get started with Angular you need to install Angular CLI.

First, you need to install Angular CLI from using the following command:

npm install -g @angular/cli

The -g flag tells command line to install Angular globally. The latest version of Angular is v9.1.0.

You can follow the documentation at the Angular CLI on how to setup a new project.

After, you have setup a new project then you have to open the project inside you favorite Editor. I am using Visual Studio Editor, you can use any other editor as per your needs.

Let's create a application which displays a table of famous NBA players.

For reference, we will be display result as follows .

Now, we need to generate a new angular using the command:

ng new example-project

And after that we need to add bootstrap to our angular project by including the following CDN link in our index.html:

After that we need to go to Bootstrap Docs and go to tables section.

Now we are gonna type the code in our project. After we have type the code in our project, our application will look something like this.

You can see the result by running the following command in your terminal:

ng serve -o

This will compile your project and open it in your favorite Browser.

That's all for this article. In the next article we will try and replace the static data with Real-time data.

Here is the link to the Gitlab Project if anyone is interested.

Markdown Tutorial

Manish — Mon, 27 May 2019 05:58:03 +0000

This tutorial teaches you the basic of Markdown language. Markdown is a lightweight markup language which is used to add formatting to plain text. Let's get started.

Heading

You can add a heading in Markdown by adding # in front of the heading you want to put. For E.g:

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5

Heading 6

You can out a maximum of 6 headings in a Markdown.

Paragraphs

For paragraphs you need to use a blank line to create a new line and add the text in there. For e.g.:

This is the first paragraph.

This is the second paragraph.

This is the third paragraph.

You can add as many as paragraph you want in Markdown. It is the same as we do in plain text.

Line Breaks

In Markdown to add a line break you need to type two to three spaces and then press return. Here is the example:

This is the first line.

Now you have the second line.

You can add as many as line you want in Markdown.

Emphasis

Bold

To bold a text you need to put the text in Double Asterisk Bold

Italic

To italic a text you need to put the text in Single Asterisk i.e. Italic

Bold & Italic

Markdown provides a functionality where you can Bold & Italic the text at the same time. See the below example for further reference.

Bold & Italic.

Block quotes

A block quotation (also known as a long quotation or extract) is a quotation in a written document that is set off from the main text as a paragraph.

So in order to use a text as Block Quote, you need to use the angular bracket '>' in front of the text you want to set as a block quote. For example:

This is a first line in Block Quote

This is a second line in a Block Quote.

Nested Block quotes

You can use a block quote inside a block quote. For e.g.:

This is a single block quote.
 This is a nested block quote.

The syntax for this is:

>This is a single block quote.
>
>      This is a nested block quote.

This is the end of the Part 1 of the two series of our Markdown Tutorial.