Display unformatted JSON code and format it into a visually appealing structure within a DIV element

I am currently working on a function that accepts unformatted JSON code as input and I am attempting to utilize the stringify method to format it into a more visually appealing (pretty) view. Here is the code snippet:

 function prettyPrintJSON(selectionInfo) {
  const unformattedJSON = selectionInfo.selectionText
  const formattedJSON = JSON.stringify(unformattedJSON, null, '\t')
}

Below is the unformatted JSON code:

{"colors":[{"color":"black","category":"hue","type":"primary","code":{"rgba":[255,255,255,1],"hex":"#000"}},{"color":"white","category":"value","code":{"rgba":[0,0,0,1],"hex":"#FFF"}},{"color":"red","category":"hue","type":"primary","code":{"rgba":[255,0,0,1],"hex":"#FF0"}},{"color":"blue","category":"hue","type":"primary","code":{"rgba":[0,0,255,1],"hex":"#00F"}},{"color":"yellow","category":"hue","type":"primary","code":{"rgba":[255,255,0,1],"hex":"#FF0"}},{"color":"green","category":"hue","type":"secondary","code":{"rgba":[0,255,0,1],"hex":"#0F0"}}]} 

Here is how it is displayed in the table: https://i.sstatic.net/csWkv.png

However, the JSON code appears unformatted. Additionally, I am developing a Google Chrome extension and using Vue.js framework to create a table for displaying various data types. Any suggestions on what might be missing? Thank you.

Answer №1

Transform the \t character into a numerical value to indicate the desired number of indentation spaces

let data = {"letters":[{"letter":"a","position":"first","type":"vowel","code":{"ascii":[97,65],"binary":"01100001"}},{"letter":"z","position":"last","type":"consonant","code":{"ascii":[122,90],"binary":"01111010"}}]};
 
console.log(JSON.stringify(data, null, 4)); // indentation level = 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

What are the differences between displaying JSON data on a Flask interface compared to a Django interface

Currently, I am looking for the simplest method to display data on a web interface using either Flask or Django (whichever is easier). I already have some sample JSON objects available. Could anyone provide recommendations on how to achieve this and whic ...

Guide on leveraging npm start to compile ES6 React components and Foundation Sass

Following a tutorial on setting up a React project, everything seemed to be working perfectly after installation. However, I now need to incorporate Foundation as the front-end library for a website. The issue arises because the tutorial's server.js ...

Sequelize encountered an error: getaddrinfo ENOTFOUND (even though the address is correct)

I've encountered some Sequelize errors while attempting to deploy a site I developed using Angular and Express/Sequelize. Here's the issue: Everything works perfectly on my local WAMP server, connecting to the local database without any problems ...

Vue - Display components next to sidebar

Having an issue with the vue-sidebar-menu. The sidebar is appearing over the components instead of beside them. Here is a screenshot of the problem: https://i.sstatic.net/cVgI6.jpg <template> <div id="app"> <sidebar-menu :menu="menu" ...

Troubleshooting problem in Python/Django: JSON parsing issue on the server

My setup involves a Django server API hosted on PythonAnywhere, along with a client.py file on my local computer. The main goal of the program is to check the stock of a specific item by accessing the database through the API. When the client.py file is ...

Encountered the error "Unable to update state on unmounted component in React because of timeout"

Despite the abundance of information available online about this particular warning, I am still struggling to find a solution that applies to my specific scenario. Currently, I am developing an autosave feature for a form component where typing triggers a ...

Encountered a problem when converting a JSON message's datetime array into c# using Newtonsoft.Json

I am currently working with the Newtonsoft.Json library to parse JSON messages in C#. string json = @"{'SomeSchedule': [ { 'PeriodEnd': '2014-05-28', 'PeriodStart': '2014-02-28', ...

Guide on accessing APIs for individual elements in an array

Currently utilizing Next.js / React.js and making use of this API to retrieve information about a specific country. Within the response, there exists an array called borders, as shown below: borders: [ "CAN", "MEX", ], There is ...

Collection of various data points stored in a JSON format

Is there a way to efficiently retrieve multiple values from a JSON complex object or multidimensional array? { "Items": [{ "node": { "titre": "myTitle", "representation": { "1": "09 Octobre 2012 - 19:30" ...

Setting the z-index for Bootstrap dropdown menus on containers that are generated dynamically

When using the Bootstrap 3 dropdown-menu within a dynamically generated container, I am encountering an issue where the dropdown-menu appears behind the newly created elements. Please refer to the image for visual clarification. The container item has pos ...

Is it possible that the images are unable to load on the page

The frontend code successfully retrieves the image links sent by the backend but encounters issues displaying them. Despite confirming that the imgUrl data is successfully fetched without any hotlink protection problems, the images are still not appearing ...

Retrieving data in Next.js

Exploring various techniques to retrieve information from APIs in next.js. Options include getServerSideProps, getStaticPaths, getStaticProps, Incremental Static Regeneration, and client-side rendering. If I need to send requests to the backend when a s ...

What is the best way to synchronize the scale of images with the tempo of a song?

I just started learning CSS, JS, and HTML and I have a question about scaling an image based on a song. Despite searching through YouTube and various forums, I still haven't found a solution. Any help would be greatly appreciated :) Here is the HTML ...

Error encountered while parsing JSON: Unexpected token found when using with Datatable

I'm looking to incorporate the example of DataTables AJAX source from the link https://datatables.net/release-datatables/examples/data_sources/ajax.html. Every time I try to run it, I encounter the error http://datatables.net/tn/1. After researching t ...

Struggling to accurately convert the string into a date object

I have an array of objects structured like this: const days = [ { _id: 12312323, date : '30/12/2021', dateStatus : 'presence' }, ... ] I am looking to convert the date property from a string to a Date object using the follo ...

Maintain the selected bootstrap tab even after the page is refreshed, even when the content is loaded dynamically

I am currently facing an issue with loading tabs using Angular. Whenever a tab is clicked, the id is saved to localStorage. Now, I want to programmatically click on the same tab using jQuery when the page refreshes. However, since the DOM element for the ...

Verify if the specified value is present in the dropdown using AngularJS

Utilizing AngularJS, I have implemented an input field with autocomplete functionality. The autocomplete feature pulls data from a JSON file and displays it in a dropdown table format. Users are able to filter the results and select a value from the dropdo ...

What methods with JavaScript, Ajax, or jQuery can I apply to populate the student details?

For completing the StudentID section, please fill out the form data.cfm with the first name, last name, and Middle Name. <script language="Javascript"> $(function() { $( '#effective_date' ).datepicker(); jQuery.validator.addMetho ...

Having trouble with sending volley requests to the server - need some assistance, please

I am having trouble converting a List of objects into a JSON array and then passing it to the server for submission. I have attempted this multiple times without success. I believe the issue lies in the part where I convert the List of objects into a JSON ...

Deleting an element from HTML using jQuery

In the midst of creating a system that allows users to construct their own navigation structure, I have encountered a stumbling block. The idea is that when a user lands on the site, they are presented with a list of available topics from which they can ch ...