Retain the spaces within a string in Java and JavaScript programming languages

My Java code sends data to the browser via an HTTP request, and the output looks something like this:

JAVA CODE OUTPUT

| Id  | Operation           | Name | Rows  | Bytes | Cost (%CPU)| Time     |
|   0 | SELECT STATEMENT    |      |       |       |     3 (100)|          |
|   1 |  FOR UPDATE         |      |       |       |            |          |
|   2 |   BUFFER SORT       |      |       |       |            |          |
|   3 |    TABLE ACCESS FULL| DD   |     4 |   160 |     3   (0)| 00:00:01 |

However, when I display it in the browser, the formatting is not great. I have an array of strings that I am displaying using ng-repeat, and while it looks fine in Java code, it doesn't look good in the browser. I tried preserving white spaces, but it didn't make a difference. All I need to do is preserve all spaces in the string.

{ 
    white-space: pre;
}

Any ideas or suggestions on how to improve the display?

https://i.sstatic.net/lEOv9.png

javascriptjavahtmlcssangularjs

Answer №1

If you want to display code snippets in your HTML, one common method is to enclose it in pre tags. However, another more effective approach is to utilize HTML table cells for a cleaner and organized presentation.

<pre>
| Id  | Operation           | Name | Rows  | Bytes | Cost (%CPU)| Time     |
|   0 | SELECT STATEMENT    |      |       |       |     3 (100)|          |
|   1 |  FOR UPDATE         |      |       |       |            |          |
|   2 |   BUFFER SORT       |      |       |       |            |          |
|   3 |    TABLE ACCESS FULL| DD   |     4 |   160 |     3   (0)| 00:00:01 |
</pre>

Answer №2

For consistent letter width, it is essential to utilize a monospace font. This can be achieved through css:

{
    font-family: "Courier New", Courier, monospace;
}

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

@ManyToMany multiple instances

I am facing an issue with persistence in my code. The Meal class contains a list of Products, and the Product class has a list of Meals defined in a @ManyToMany relation. When I attempt to save the data, the Compiler tries to save every product, resulting ...

javaduplicatesmany-to-manypersist

Is it possible to integrate a standard drop-down menu/style into a MUI Select component?

I am currently working on implementing the default drop-down menu style for my MUI Select Component. Here is the desired menu appearance: https://i.stack.imgur.com/GqfSM.png However, this is what my current Select Component looks like: https://i.stack. ...

javascriptcssmaterial-uidrop-down-menujsx

What is the best way to extract text from a class using selenium?

<div class="class-one"> <div class="class-two"> lorem ipsum <div class="class-three"> <a href="https://yahoo.com" target="" class="btn btn--primary btn--purple " id="" title="find"><i class="fal fa-fw fa-file-word"></i>& ...

pythoncssselenium

I am only able to trigger my AJAX request once

Whenever I click on a checkbox, an ajax function is triggered. This function sends a query string to a PHP script and returns relevant HTML. Strangely enough, if I first select a dropdown option and then check another checkbox along with the previous one ...

javascriptajaxjquery

Error in EL syntax: Binary operator cannot be the first in an expression

Looking for some innovative solutions to address this warning message: Error: Expression cannot begin with a binary operator This issue is triggered by the code snippet below: String.format("#{myController.deleteItemById(%d)}", getId()) Prior to this ...

javaeclipseel

It appears that req.session is not defined and the user_id within req.session is not

Currently, I am implementing session management with Express and Node using HTTPS. I am facing an issue where I need to create a session in Express for authentication before redirecting to static files in the public folder. Previously, I encountered a prob ...

javascriptnode.jssessioncookiesexpress

Activate a jQuery collapsible feature through an external hyperlink

Can we enable the expansion of a jQuery collapse by clicking on an external link? For instance, let's say we have a link on the home page that leads to another page. When the user clicks on this link from the home page, we want it to redirect to the i ...

javascriptjquery

What are the pros and cons of using a piped connection for Puppeteer instead of a websocket?

When it comes to connecting Puppeteer to the browser, you have two options: using a websocket (default) or a pipe. puppeteer.launch({ pipe: true }); What distinguishes these approaches? What are the benefits and drawbacks of each method? How do I know wh ...

javascriptnode.jspuppeteerwebautomation

PhoneGap Troubleshooting: Device Plugin Malfunctioning

I'm having trouble getting the device plugin to work with my Cordova/PhoneGap project. Currently, I am using Cordova version 3.3.1-0.1.2. I followed the documentation and installed the plugin using the following command: C:\ProjectFolder>pl ...

javascriptnode.jscordovanpm

Trigger the ontextchanged() event for an asp:TextBox using Javascript

I have a specific asp:TextBox that is structured in the following way: <asp:TextBox runat="server" AutoPostBack="True" ID="txtG1" ontextchanged="txtG1_TextChanged" onmouseout="javascript:RefreshIt(this)"/> In addition to this, there is a Javascript ...

javascriptc#ajaxevent-handlingdom-events

Using the power of Selenium's XPath, we can easily navigate through a table to access

Looking for assistance in creating selenium xpath for the various column links within a table. Each row has a unique identifier and contains information about a product, including the name. Based on the product name, I need to locate other links within the ...

cssxpathselenium

Caution: Potential Unresolved Promise Rejection Detected (ID: 21) - Error: Undefined is not a valid object when trying to evaluate 'res.json'

ERROR Getting an Unhandled Promise Rejection (id: 21): TypeError: undefined is not an object (evaluating 'res.json'). Any suggestions on fixing this issue in my code? I've checked the logs for user and loggeduserobj, and they seem to be cor ...

javascriptnode.jsreactjsreact-native

Issues with retrieving JSON data from Google Books API object

I've been working on retrieving data from the Google Books API and displaying the titles of the first 10 results on a web page. The site is successfully making the request, and I have a callback function that handles the results as shown below: funct ...

javascriptjsongoogle-books

Jquery's remove function fails to function correctly when used on a cloned element

I am facing an issue where I have a list of rows that need to be deleted. However, when I attempted to use jQuery's remove function, it only removed the original row and not its clone. My goal is for the parent element of the parent to be removed when ...

javascriptphpjqueryhtml

Unexpected lag causing delays in jQuery animations

I am attempting to implement a "hover" effect using jQuery. Everything seems to be working fine, except for a strange delay that occurs only the first time the complete callback is triggered - oddly enough, this is the only instance where it reaches the pr ...

javascriptjqueryanimation

The method for organizing boxes on the stack exchange website's list page

I can't help but wonder about a unique and innovative feature on this stackexchange page that showcases all the stackexchange sites in a grid layout. Upon clicking on a site box, it expands in size while the surrounding boxes adjust their positions t ...

javascriptalgorithmhtmlstackexchange

After updating Angular JS from version 1.2.x to 1.4.x, the ngPattern directive is no longer functioning as

Since upgrading the Angular JS library to version 1.4.1, the pattern validation with angular ngPattern seems to be malfunctioning. Check out the code snippet provided below for reference. <form class="form-horizontal" name="someForm" role="form" no ...

angularjsng-patternangularjs-ng-pattern

Guide on converting arrays and sending this information in Node.js

I managed to retrieve quiz data and now I want to enhance it by mapping each answer to its respective quiz. I have a feeling that I should use something like forEach.push, but I haven't quite figured out the exact method... const API_KEY="https: ...

javascriptnode.jsexpress

Dispatch prop within useEffect

App.js -> <Lobbies inGame={inGame} setLobby={setLobby} userName={userName} userKey={userKey}/> Lobbies.js -> import React, { useState, useEffect } from 'react'; import firebase from 'firebase'; const Lobby = ({userKey, ...

javascriptreactjsreact-native

Generating a JavaScript object based on an array of keys

I'm currently grappling with a task that is proving to be quite challenging. I have a set of arrays structured like this: ['key1', 'key2', 'key3'] ['key1', 'key2', 'key4'] ['key1', ...

javascriptjqueryarraysjsonpojo