Converting data from a JSON-like file format into valid JSON using JavaScript

I have a unique situation where I am dealing with numerous files that have an unusual file extension.

My goal is to utilize JavaScript to read these files and then convert their contents into either JSON or regular JavaScript objects. Is this task even feasible?

I am somewhat optimistic because the file structure closely resembles JSON:

// file.unusualFileType

Page: {
  id: P001
  Title: "Page Title"
  URL: "/home"
  Elements: {
    Button: {
      Text: "Click me"
      Action: SAVE
    }
  }
}

EDIT: Thanks to Håken Lid, my specific issue has been resolved. However, I still have a lingering curiosity about how one could go about reading any file as a string using JavaScript and potentially parsing such content.

javascriptjsonparsing

Answer №1

Converting this code snippet into valid yaml format involves removing the curly brackets. By utilizing js-yaml to parse the example data, you may find that it can be integrated seamlessly with your other files as well.

const rawData = `
Page: {
  id: P001
  Title: "Page Title"
  URL: "/home"
  Elements: {
    Button: {
      Text: "Click me"
      Action: SAVE
    }
  }
}`
const yamlData = rawData.replace(/[{}]/g, '')
console.log(jsyaml.load(yamlData))
<script src="https://cdnjs.cloudflare.com/ajax/libs/js-yaml/3.13.1/js-yaml.min.js"></script>

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

Utilizing the power of moment.js within an Angular component

My goal is to utilize the moment() function within double curly braces {{}} in order to present a date: {{ moment().date(timeslot.start.value.month) .month(timeslot.start.value.dayOfMonth - 1) .format("MMMM Do") }} Unfortunately, I ...

javascriptangularjsmomentjs

Utilizing Jest and nest.js for testing with absolute paths

Looking at my jest configuration inside the package.json: "jest": { "moduleFileExtensions": [ "js", "json", "ts" ], "moduleDirectories":["node_modules", "src" ...

javascripttypescriptjestjsnestjs

How can I generate a sorted array of objects in a JSON output using PowerShell?

Is it possible to generate a JSON output with an array of objects sorted in ascending order based on the "count" property? I need to maintain the original $result object structure, without caring about the order of "Good" or "Bad", My goal is to sort the o ...

arraysjsonpowershellsortingpscustomobject

Switch out the name of multiple elements with mootools

Is there a Moo tool that can replace multiple element IDs? I currently have the following code: $$('myelement').each(function(el){ var get_all_labels = el.getElements('label'); var get_label_id = get_all_l ...

javascriptmootools

Using jQuery, you can easily pass an array in an AJAX request

I am working on a form that has multiple identical fields: <input type="text" id="qte" value="" name="qte[]"> How can I pass the array to my file processing? I have observed that the array sent via ajax is converted into a string. $("#form_comman ...

phpjavascriptjqueryajax

Add .json files to your database

After successfully downloading tweets into a json file, the next step is to import it into a database using the following function: def import_json(fi): logging.warning("Loading tweets from json file {0}".format(fi)) for line in open(fi, "rb"): data ...

pythonjsonsqliteipython

what's the reason for ajax constantly sending requests back-to-back?

Today, I find myself pondering. In my current project, the ajax calls are not behaving asynchronously. Each request is being sent one after the other. As one request is being processed, all other requests are getting stuck in a pending state. You can ob ...

javascriptjquery.netangularjsasp.net-mvc

A problem has occurred in Next.js where FileReader is not recognized and is causing a Reference

Exploring the latest features of Next.js 13 with the /app directory, I encountered an issue while using the FileReader in a basic client-side component that manages an input form. Here is a brief overview of the code: "use client"; import React, ...

javascriptreactjsnext.js

JSON appears to be failing to be identified

I am encountering difficulties in getting my JSON data to display correctly on my web page. Even though I have validated the JSON returned from the server and confirmed its correctness, my javascript function seems unable to process it as intended. Here is ...

jqueryajaxjson

NodeJS Express REST API fails to fetch data in GET request

As I work on developing a REST API using NodeJS and Express, I have set up routes for handling "offers". However, when attempting to send a GET request, I receive an empty response along with a 200 status code. Here is the snippet from routes.js: route ...

javascriptnode.jsrestexpressmongoose

Getting a specific element from an Ajax response may involve using JavaScript methods to target the desired

Within my PHP file, there are multiple HTML elements that I am fetching in an AJAX response. Currently, all these HTML elements are being returned in my drop area. How can I adjust the code to only retrieve a specific element, such as an image, like so: P ...

javascriptjqueryhtmlajax

Avoid positioning issues when dropping a DIV onto the Canvas

Utilizing the JavaScript code below allows me to drag a DIV onto a canvas. I am currently loading a multi-page PDF, which consists of image files, in a pop-up window and positioning canvas layers over them. In these canvas layers, shapes are then loaded at ...

javascripthtmlhtml5-canvasfabricjs

Node.js Express.js Module for Asynchronous SqLite Operations

Currently, I am working on a task that involves making synchronous requests to a database and passing the data to Express. Here is the code snippet: app.get('/', (req, res) => { let db = new sqlite3.Database('./Problems.db'); ...

javascriptnode.jssqliteexpress

Ways to restrict input text to a specific set of values

When using an input text form, I need to ensure that users only insert values ranging from 1 to 10. However, my attempts to utilize a mask for customization have resulted in allowing values higher than 10. How can I restrict the input to only be allowed b ...

javascriptjqueryjsonhtmlcss

Assign the DatePicker Object to an HTML Element

I am currently using a SyncFusion date picker in my project and the implementation looks like this: var datepicker = null; $("#datepicker").hide(); $("#click").click(function(){ $("#datepicker").show(); datepicker = new ej.calendars.DatePi ...

javascriptjquerysyncfusionej2-syncfusion

Create a receipt by utilizing jQuery with dynamically generated inputs

Is there a way to insert the descriptions and amounts of invoice items into the receipt, similar to the due date? The input for this section is dynamic with multiple rows that can be added or deleted. I'm considering using a counter that increments e ...

javascripthtmljquery

What could be the reason for the next.js Script tag not loading the third-party script when using the beforeInteractive strategy?

I have been trying to understand how the next.js Script tag with the beforeInteractive strategy works. I am currently testing it with lodash, but I keep encountering a ReferenceError: _ is not defined. I was under the impression that when a script is loade ...

javascriptreactjsnext.js

Retrieve dynamic data from a website using jQuery's AJAX functionality

I am trying to retrieve the data from example.com/page.html. When I view the content of page.html using Chrome Browser, it looks like this: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> & ...

javascripthtmljqueryajax

"Unraveling Vue.js: A guide to fetching JSON data one object at a time

I am facing a challenge with a large JSON file (40 MB) that includes data on countries, their IDs, and a total sum that I need to calculate. { "0": { "id": 0, "country": "usa", "sum": 201, }, ...

javascriptjsonvue.jsvuejs2

What methods does MaterialUI utilize to achieve this?

Have you checked out the autocomplete feature in their component? You can find it here: https://mui.com/material-ui/react-autocomplete/ I noticed that after clicking on a suggestion in the dropdown, the input box retains its focus. How do they achieve thi ...

javascriptreactjsvue.jsmaterial-uivuetify.js