What are some simple techniques for displaying JSON data in a text box on a webpage?

I'm currently utilizing edit_area_full.js on several of my web pages to format python code snippets. However, I have encountered situations where I need to display formatted JSON data, which edit_area does not support. Can anyone recommend a suitable alternative to edit_area that can handle formatting JSON data within a text box on a webpage?

Below is an example of how I am currently formatting Python code:

<p><textarea id="code-area" name="user_code" rows="12" cols="80">if True: pass</textarea></p>

<script language="javascript" type="text/javascript" src="/static/edit_area_full.js"></script>
  <script language="javascript" type="text/javascript">
    editAreaLoader.init({
      id: "code-area",
      syntax: "python",
      start_highlight: true,
      allow_resize: "no",
      font_size: 12,
      toolbar: "new_document, |, help",
      replace_tab_by_spaces: 4
    });
  </script>
javascriptjsonformatting

Answer №1

If you want to achieve this, follow these steps:

  • Utilize Edit_area_full.js with the syntax set to 'Javascript'. This will provide beautiful JSON highlighting.
  • For formatting JSON, consider using the library available at http://github.com/einars/js-beautify

You can experiment with the latter library in action by visiting:

Here's an example of how it works:

var testvar = {asd:[abc,cde,fg,{hello: world},1,2,3],ccc:"aaa",ddd:33,cas:[qwerty,[1,[2],3],4]};

The output after using the library would be:

var testvar = {
    asd: [abc, cde, fg, {
        hello: world
    }, 1, 2, 3],
    ccc: "aaa",
    ddd: 33,
    cas: [qwerty, [1, [2], 3], 4]
};

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

"Encountering a form submission error - requested resource not located

I am currently trying to submit a form to an MVC controller using AJAX, where the controller is expected to take a form collection. I came across this helpful resource on Stack Overflow regarding passing formcollection using ajax call to an action. However ...

javascriptjqueryhtmlajaxasp.net-mvc-5

Creating a step wizard form with ReactJs can be accomplished by breaking down the form into

I have developed a resume generation application with two main components: BasicDetails and EmploymentDetails. To see a working example, click here: https://codesandbox.io/s/next-dynamic-testing-issue-forked-h1nt8 index.js file: <form onSubmit={ha ...

javascriptreactjsformsnext.jsstepper

What is the method to store and retrieve data attributes linked to elements such as select options within the React framework?

Despite my efforts, I'm currently unable to retrieve the data attribute from an option using React as it keeps returning null. <select onChange={(e) => this.onIndustryChangeOption(e)} value={this.props.selectedIndustry}> <opti ...

javascripthtmlreactjsecmascript-6

Retrieving an HTML element that has been added through DOM manipulation

After successfully creating a Jquery function that inserts a 'save button' into the page when a specific button is clicked, I encountered an issue with another function meant to be activated when the save button is clicked. The first function see ...

javascriptjqueryhtmldom-manipulation

Sharing a variable with JavaScript within an OnClick event to update a progress bar in C#

When I click on a button, a JavaScript function is launched to create a progress bar. <asp:Button ID="btn_tel" runat="server" CausesValidation="False" OnClick="btn_telefono" Text="Check" CssClass="button" OnClientClick="move()" /></div> The f ...

javascriptc#asp.netonclickprogress-bar

Issue with updating patch version using NPM standard-version

I have integrated standard-version into my javascript project. I made sure to include the release script in my package.json: "scripts": { ... "release": "standard-version" } However, after adding a commit with the mes ...

javascriptgitnpmsemantic-versioningconventional-commits

Combining multiple arrays into a single array using JavaScript

Forgive my beginner question, but I am just starting to learn JavaScript and I can't shake this thought. Let's use an example: Suppose we have: animals['Cat', 'Dog']; and, mood['Sad' , 'Happy']; I ne ...

javascriptarraysnode.js

No data was retrieved by the Mongo query

I need help with a query to find all groups that have the subject of chemistry and match a specific user's schedule. The current query isn't returning any results, and I suspect there might be a syntax error in the code. I'm unsure of where ...

javascriptmongodbexpressmongoose

Combining JSON objects in a Pentaho JavaScript JSON by matching keys to merge with an existing JSON document

My goal is to construct a Json document by breaking it down into smaller pieces, with each piece containing the necessary keys to insert the smaller Json bits into the correct json structure. As I am relatively new to JavaScript and still in the process of ...

javascriptjsonpentahopdi

componentWillReceiveProps with excessive conditional statements

Having recently ventured into React development, I've already worked on 3 major projects utilizing React+Redux. However, I've noticed a recurring pattern that I find quite displeasing: componentWillReceiveProps(nextProps) { if (nextProps.par ...

javascriptreactjsreduxreact-redux

One can pass parameters to a promise's success callback within AngularJS using $q

I have encountered a situation that is similar to the one described in this post, but I am still unsure about how to implement it. I could use some assistance with setting up a successful callback. This is the current functioning code: function getStuff( ...

javascriptangularjsq

How to create select options in Angular.js without using the ng-option directive

I receive a JSON object from a service and I am using some of its fields to populate my select option list. However, when I try to print the selected value in my controller, the output response is "undefined". Can someone help me figure out what I'm ...

javascriptangularjsangularjs-scopeangularjs-ng-repeat

I'm having trouble with my Discord app command. Every time I try to use it, I keep getting the error messages "The application did not respond" and "Dispatching MESSAGE_SEND_FAILED." How

Having a good amount of experience in JavaScript, I was optimistic about developing a Discord application as it seemed quite manageable. Eventually, I successfully integrated the bot into a server and implemented a command that is now listed in Discord&apo ...

javascriptnode.jsdiscorddiscord.js

Guide to mapping points on a ThreeJS sphere in three dimensions

I've recently begun exploring the world of ThreeJS and I've encountered a challenge. I'm attempting to plot a point on a sphere, but it seems to be appearing in the southern hemisphere instead of the northern hemisphere. Vertically, it appea ...

javascriptthree.js

Going through multiple JSON objects using Python code

In my plan, I intended to have multiple JSON objects structured like this: { "Profiles": { "profile_0": { "Name": "Hellow", "Age": "8", "Email": "<a href="/cdn-cgi/l/email-protection" class="__cf_email__" ...

pythonjsonobject

Using React-Router v6 to pass parameters with React

My App.js file contains all the Routes declarations: function App() { return ( <div className="App"> <Routes> <Route path="/"> <Route index element={<Homepage />} /> ...

javascriptreactjsreact-routerreact-router-dom

Is it possible to trigger the JavaScript mouseover function following a click event?

Is it possible to call a function on mouse over after the first click event is triggered by the user? <a href="javascript:void(0);" id="digit<?php echo $k;?>" onClick="javascript:return swapClass('<?php echo strtoupper($v);?>',&ap ...

javascriptjqueryajax

"Node NPM encounters difficulty in importing package using only its name and not the complete path

Currently facing an issue with my newly created Node Package while trying to share a project I'm working on. Specifically, I am encountering difficulties with the require statement. Project: https://github.com/kcjonson/indigo The problem lies in req ...

jsonnode.jsnpm

Setting the font-size in HTML/CSS to dynamically adjust and fill the entire width and height of its

I'm trying to make a <div> element adjust its size based on the browser window. Within this <div>, there is a paragraph of text: <div style="width:80%; height:80%; margin:10%;"> <p>Paragraph of text. Paragraph of text. Pa ...

javascripthtmlcssfont-size

Have you ever wondered why the React HeroIcons architecture includes React.createElement instead of simply returning plain SVG elements?

As I integrate HeroIcons into my Next.Js app, I find myself pondering over how they have structured their package architecture. The way they return icons is like this: const React = require("react"); function ArchiveIcon(props, svgRef) { retur ...

javascriptreactjssvgnext.jsheroicons