JSON formatting error, an unexpected colon was encountered

I have a JSON file that contains various recipes for different meals categorized by their purpose of either losing weight or gaining weight.

{
    "breakfast": {
        "lose": [
            {
                "name" : "Fruit Shake",
                "ingredient" : "Up to 300g of fresh fruit",
                "recipe": "Put all the chosen fruit in the mixer, unitl you have a liquid fruit shake, that as low calories and a good taste",
                "macro-review": "Some carbs, represented by natural sugar, a lot of vitamin"
            },
            {
                "name" : "Avocado and smoked salmon toasts",
                "ingredient": "Avocado, toast, smocked salmon", 
                "recipe": "Put the avocado on the toast, and then the smocked salmon. If you really want to lose fat, don't put too much avocado",
                "macro-review": "A few carbs, represented by bread, and a lot of protein, represented by avocado and salmon"
            }
        ],
        ...

Despite using an online JSON validator, I encountered an error message in the console: 

Uncaught SyntaxError: Unexpected token ':'
. This issue is hindering my progress with importing the data into my JavaScript file. Any insights on resolving this problem would be greatly appreciated. Thank you!

javascriptjson

Answer №1

Suppose the JSON data shown above is stored in a file named data.json. Within your JavaScript file

const data = require('<relative_path_to_data.json_file>');

// add your code here

Key Points

  • If you are using ES6, you can opt for import instead of require
  • Ensure that you specify the relative path correctly in the require/import statement

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

Is your Javascript navigation functioning properly on some submenus while encountering issues on others?

If you visit , you'll notice that it's a visually appealing site. The navigation submenus seem to be functioning properly, HOWEVER upon inspecting the element, you'll notice that under the PRICING tab, there are submenus that have the same c ...

javascripthtmlcss

Information is not stored within an array

After receiving data from an API, I attempted to store it in an array. However, when I tried to print the array, it was empty. The data retrieved is in JSON format. fetch("url") .then((response) => response.json()) .then((data) => ...

javascriptnode.js

What is the best way to modify part of a URL and refresh the page with the updated changes?

Good evening, everyone. This is my inaugural post on this platform, so I hope I am following the norms correctly. I have scoured various sources, including this site, in search of a solution to a problem I am facing, but I have not come across anything t ...

javascriptjqueryhtmlurlfrontpage

terminate server through the router

I have created an express application like the following: const express = require('express') const app = express(); app.use(express.static(path.join(__dirname, 'public'))); app.post('/close', async (_, res) => { res.sta ...

javascriptnode.jsexpressnodejs-server

Execute a PHP function using JavaScript/jQuery with AJAX requests

Hello everyone, I am reaching out for assistance with AJAX as I am still quite new to it. Despite the abundance of examples available, I find it challenging to grasp the concept. Specifically, I need help with my validation of a contact form using JavaScri ...

phpjavascriptjqueryhtmlajax

What is the method for assigning 'selective-input' to a form field in Angular?

I am using Angular and have a form input field that is meant to be filled with numbers only. Is there a way to prevent any characters other than numbers from being entered into the form? I want the form to behave as if only integer keys on the keyboard ar ...

javascriptangularformstypescriptautocorrect

Strange sequence of results coming from Vue.js

methods: { ShowWindow: function(QueryID) { this.$data.ID = QueryID; if(this.GetData()) { console.log("asdasd") } document.querySelector("#EditWindow").style.visibility = "visi ...

javascriptvue.js

Implement the use of NextAuth to save the session during registration by utilizing the email and password

When registering a user using email, password and username and storing in mongodb, I am looking to incorporate Next Auth to store sessions at the time of registration. My goal is to redirect the user in the same way during registration as they would experi ...

javascriptmongodbexpressnext.jsnext-auth

The PHP script encounters an Ajax request and returns a null response

My current challenge involves sending data from the browser's local storage to PHP using AJAX. When I test the API in Postman by inputting this data (POST): [ { "product-id": "32", "product-name": "Reese Stevenson&qu ...

javascriptphpajax

Executing control with AngularJS when ng-change event occurs

When using AngularJS One interesting scenario I encountered is having a ng-change event on a text field and seeing the function being called correctly: <input type="text" ng-model="toggleState" ng-change="ToggleGroupVisiable()" data-rule"" /> The ...

javascriptangularjs

Is there a solution to the issue of Javascript URL regex returning a comma at the end of the URL?

I'm facing an issue with my regex for matching URLs. It works well for strings containing www. or starting with http://, but it introduces an unwanted comma in the matched URLs. For example, when I extract a URL from a textarea, apply the regex, and r ...

javascriptjqueryregex

While attempting to add a member to a role, I encounter the following error: ReferenceError: mesage is not defined

Every time I work on the Discord bot code that assigns a role when activated, I encounter this error. I'm not sure if there's a hidden bug causing it, so if you spot it, please help me fix it! Error message. if(mesage.content.startsWith(prefix ...

javascriptnode.jssyntax-errordiscorddiscord.js

Steps for implementing CSS module with a dynamically generated class name

Recently, I started delving into the realm of CSS modules. My current project involves creating a slider that dynamically changes classes like "activeSlide", "nextSlide", and "lastSlide" to achieve different functionalities. However, I'm facing an is ...

javascripthtmlcssreactjscss-modules

The dragging functionality in gridstack.js doesn't seem to be functioning correctly

I have been implementing GridStack.JS in the code snippet below (Basic Structure) <div class="grid grid-stack"> <div class="grid-item cards grid-stack-item" data-gs-width="4" data-gs-height="2"> <div class="inner-grid"> </div& ...

javascriptjqueryhtmlapexgridstack

JavaScript is currently not executing properly. According to Firebug, the message states to "reload the page to obtain the source for: ..."

I'm currently working on creating a bookmarklet that adds some JavaScript elements to the head of a webpage. However, I've noticed that one of them is not loading properly. Is there a solution to this issue? Is it possible to reload the page wit ...

javascriptjqueryhtmldombookmarklet

Access and retrieve dynamically generated table row values with the use of AngularJS

Hi, I'm new to angularjs and I have a table where I need to dynamically add rows. I've got everything working with a bit of JQuery but I'm having trouble getting the value of dynamically created table rows. Here's my code, can someone p ...

javascriptjqueryangularjs

Unable to add chosen elements to array - Angular material mat select allowing multiple selections

Can anyone assist me in figuring out what I am doing wrong when attempting to push data to an empty array? I am trying to only add selected values (i.e. those with checked as true), but I can't seem to get inside the loop This is the current conditi ...

javascriptangulartypescriptecmascript-6angular-material

The Nodejs page becomes unresponsive when making several requests to a Custom API

My application encounters a problem where it only works smoothly when I submit the form once. If I try to press the Submit button multiple times, the application freezes for some time (around 1000.000 ms) before returning the last request in the console an ...

jsonnode.jsapiexpresspug

Flutter: Iterating Through JSON Data

I am working on a Json parsing project using Flutter, and the structure of the Json data is as follows: { "Dependents":[ { "Name": "Kim", "Relationship": "Parent", "Entitlements": [ { "GP": { ...

jsondartflutter

Building an intricate table using the Json dataset

Here is an example JSON data structure: [ { "instructor": "instructor1", "student": "student1" }, { "instructor": "instructor1", "student": "student1" }, { "instructor": "instructor1", "student": "student1" }, { "ins ...

javascriptjquery