Distorted text caused by window.prompt()

I need my users to input a JSON format. Therefore, I use the following code:

const inputJSON = window.prompt("Please enter the JSON:");

After that, I allow the users to make edits to the JSON like this:

const newJson = window.prompt("Enter the new JSON:", inputJSON ); // assuming no edits are made by the user

However, I have observed that when I provide a default value in the prompt function as shown above, the text becomes corrupted:

console.assert(inputJSON  === newJson); // fails!

This is the JSON data that I utilized:

{"$schema":"http://adaptivecards.io/schemas/adaptive-card.json","type":"AdaptiveCard","version":"1.0","speak":"<s>Flight KL0605 to San Fransisco has been delayed.</s><s>It will not leave until 10:10 AM.</s>","body":[{"type":"ColumnSet","columns":[{"type":"Column","width":"auto","items":[{"type":"Image","size":"small","url":"https://adaptivecards.io/content/airplane.png"}]},{"type":"Column","width":"stretch","items":[{"type":"TextBlock","text":"Flight Status","horizontalAlignment":"right","isSubtle":true},{"type":"TextBlock","text":"DELAYED","horizontalAlignment":"right","spacing":"none","size":"large","color":"attention"}]}]},{"type":"ColumnSet","separator":true,"spacing":"medium","columns":[{"type":"Column","width":"stretch","items":[{"type":"TextBlock","text":"Passengers","isSubtle":true,"weight":"bolder"},{"type":"TextBlock","text":"Sarah Hum","spacing":"small"},{"type":"TextBlock","text":"Jeremy Goldberg","spacing":"small"},{"type":"TextBlock","text":"Evan Litvak","spacing":"small"}]},{"type":"Column","width":"auto","items":[{"type":"TextBlock","text":"Seat","horizontalAlignment":"right","isSubtle":true,"weight":"bolder"},{"type":"TextBlock","text":"14A","horizontalAlignment":"right","spacing":"small"},{"type":"TextBlock","text":"14B","horizontalAlignment":"right","spacing":"small"},{"type":"TextBlock","text":"14C","horizontalAlignment":"right","spacing":"small"}]}]},{"type":"ColumnSet","spacing":"medium","separator":true,"columns":[{"type":"Column","width":1,"items":[{"type":"TextBlock","text":"Flight","isSubtle":true,"weight":"bolder"},{"type":"TextBlock","text":"KL0605","spacing":"small"}]},{"type":"Column","width":1,"items":[{"type":"TextBlock","text":"Departs","isSubtle":true,"horizontalAlignment":"center","weight":"bolder"},{"type":"TextBlock","text":"10:10 AM","color":"attention","weight":"bolder","horizontalAlignment":"center","spacing":"small"}]},{"type":"Column","width":1,"items":[{"type":"TextBlock","text":"Arrives","isSubtle":true,"horizontalAlignment":"right","weight":"bolder"},{"type":"TextBlock","text":"12:00 AM","color":"attention","horizontalAlignment":"right","weight":"bolder","spacing":"small"}]}]},{"type":"ColumnSet","spacing":"medium","separator":true,"columns":[{"type":"Column","width":1,"items":[{"type":"TextBlock","text":"Amsterdam","isSubtle":true},{"type":"TextBlock","text":"AMS","size":"extraLarge","color":"accent","spacing":"none"}]},{"type":"Column","width":"auto","items":[{"type":"TextBlock","text":" "},{"type":"Image","url":"https://adaptivecards.io/content/airplane.png","size":"small"}]},{"type":"Column","width":1,"items":[{"type":"TextBlock","text":"San Francisco","isSubtle":true,"horizontalAlignment":"right"},{"type":"TextBlock","text":"SFO","horizontalAlignment":"right","size":"extraLarge","color":"accent","spacing":"none"}]}]}]}

TL;DR: This statement should be true:

longJson == prompt("Just press enter", longJSON)

Edit:

I conducted a test on my browser with the following code snippet:

const json = `{"$schema":"http://adaptivecards.io/schemas/adaptive-card.json","type":"AdaptiveCard","version":"1.0","speak":"<s>Flight KL0605 to San Fransisco has been delayed.</s><s>It will not leave until 10:10 AM.</s>","body":[{"type":"ColumnSet","columns":[{"type":"Column","width":"auto","items":[{"type":"Image","size":"small","url":"https://adaptivecards.io/content/airplane.png"}]},{"type":"Column","width":"stretch","items":[{"type":"TextBlock","text":"Flight Status","horizontalAlignment":"right","isSubtle":true},{"type":"TextBlock","text":"DELAYED","horizontalAlignment":"right","spacing":"none","size":"large","color":"attention"}]}]},{"type":"ColumnSet","separator":true,"spacing":"medium","columns":[{"type":"Column","width":"stretch","items":[{"type":"TextBlock","text":"Passengers","isSubtle":true,"weight":"bolder"},{"type":"TextBlock","text":"Sarah Hum","spacing":"small"},{"type":"TextBlock","text":"Jeremy Goldberg","spacing":"small"},{"type":"TextBlock","text":"Evan Litvak","spacing":"small"}]},{"type":"Column","width":"auto","items":[{"type":"TextBlock","text":"Seat","horizontalAlignment":"right","isSubtle":true,"weight":"bolder"},{"type":"TextBlock","text":"14A","horizontalAlignment":"right","spacing":"small"},{"type":"TextBlock","text":"14B","horizontalAlignment":"right","spacing":"small"},{"type":"TextBlock","text":"14C","horizontalAlignment":"right","spacing":"small"}]}]},{"type":"ColumnSet","spacing":"medium","separator":true,"columns":[{"type":"Column","width":1,"items":[{"type":"TextBlock","text":"Flight","isSubtle":true,"weight":"bolder"},{"type":"TextBlock","text":"KL0605","spacing":"small"}]},{"type":"Column","width":1,"items":[{"type":"TextBlock","text":"Departs","isSubtle":true,"horizontalAlignment":"center","weight":"bolder"},{"type":"TextBlock","text":"10:10 AM","color":"attention","weight":"bolder","horizontalAlignment":"center","spacing":"small"}]},{"type":"Column","width":1,"items":[{"type":"TextBlock","text":"Arrives","isSubtle":true,"horizontalAlignment":"right","weight":"bolder"},{"type":"TextBlock","text":"12:00 AM","color":"attention","horizontalAlignment":"right","weight":"bolder","spacing":"small"}]}]},{"type":"ColumnSet","spacing":"medium","separator":true,"columns":[{"type":"Column","width":1,"items":[{"type":"TextBlock","text":"Amsterdam","isSubtle":true},{"type":"TextBlock","text":"AMS","size":"extraLarge","color":"accent","spacing":"none"}]},{"type":"Column","width":"auto","items":[{"type":"TextBlock","text":" "},{"type":"Image","url":"https://adaptivecards.io/content/airplane.png","size":"small"}]},{"type":"Column","width":1,"items":[{"type":"TextBlock","text":"San Francisco","isSubtle":true,"horizontalAlignment":"right"},{"type":"TextBlock","text":"SFO","horizontalAlignment":"right","size":"extraLarge","color":"accent","spacing":"none"}]}]}]}`;
console.log(json == window.prompt("Do not edit. Just press enter.", json)); // false
console.log(json.length); // 2818
console.log(window.prompt("Do not edit. Just press enter.", json).length); // 2000

Answer №1

It's not a simple task to directly compare two Object instances in JavaScript.

{} === {} // this will return false

One way to approach this is by converting the objects to strings and then comparing them:

console.assert(JSON.stringify(originalObject) === JSON.stringify(updatedObject));

Answer №2

After some investigation, I have discovered the root of the problem. It appears that in Chrome, the prompt function is restricted to only 2000 characters. To confirm this limitation, I conducted the following test:

const expectedLength = 4000;
const actualLength = prompt("Please do not make any changes, simply press enter.", Array(expectedLength).join("0")).length
console.assert(expectedLength == actualLength);

Answer №3

Encountered a problem with the JSON data. The JSON has been overwritten, resulting in mismatched values. Check out the variance between the input and output JSON files here: diffchecker

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

Show an error message in a popup window, following a validation error in Laravel

I am facing an issue with displaying error messages in the update modal form. I am using Laravel request for validation and AJAX to submit the form inside a modal. My goal is to show the error message for each field that is inputted incorrectly. However, i ...

"Is it possible to disable the transition animation in mat-sidenav of Angular Material without affecting the animations of

My Angular application features a mat-sidenav that is organized like this: <mat-sidenav-container> <mat-sidenav [mode]="'side'"> <!-- Sidenav content --> </mat-sidenav> <mat-sidenav-content ...

Show and conceal columns in HTML with the help of JavaScript

I need help with a webpage where I want to display a table with 2 columns and two rows (header and body). My goal is to use JavaScript to control the visibility of these 2 columns. The decision to show or hide the columns should be based on the values ...

Issue: Attempting to display array elements within a React Functional Component?

Encountering an issue while attempting to log array elements, receiving the error message: TypeError: Cannot read property '0' of undefined Interestingly, I am able to successfully log the project.tasks array object in the console. However, l ...

Ways to retrieve every element inside a specific div container

Is there a way to select all elements inside a div except for specific ones? For example, consider the following structure: <div id="abc"> <div class="def"> sagar patil</div> <div class="pqr"> patil</div& ...

Tips on enabling JS tooltips in Shadow DOM

I am currently developing an app using Vue and Bootstrap, where I am creating web components based on the official Vue documentation. The Bootstrap framework and my business logic are functioning well within the #shadow-root of the web components, behaving ...

Fill Datalist with Database Information

As a beginner in javascript and php, I am trying to populate a datalist from a mysql table. However, I am facing some difficulties with the relevant codes provided below. Although I can fetch data from the database, I am struggling to display them in the d ...

ways to manipulate href using JavaScript

Apologies for any grammatical errors in my English. With the use of jQuery, I am trying to achieve the functionality where pressing the arrow keys on the keyboard will redirect to a URL with the #g tag. Specifically, when the down arrow key is pressed, h ...

Locate the index position of an element in one array based on a corresponding element in a

I am seeking a way to determine the index and group that an item belongs to within a parent json group. Is there a method for achieving this? I am willing to modify the json format if necessary. I made an attempt using JSON.stringify(), but it seems to be ...

Enhancing the Syntax of If and If Else in Jquery Functions

I'm struggling to simplify and optimize this block of code. Would appreciate any help in making it more efficient! var status = "closed"; $(document).on('click', '[data-toggle-nav]', function(event) { if ($(this) && status = ...

"Discover the art of arranging div elements into a grid format with multiple rows and two columns

<div class="parent"> <div class="col">1</div> <div class="col">2</div> <div class="col">3</div> <div class="col">4</div> <div class="col">5</div> <div class="col">6</div ...

Using Ajax in conjunction with the include functionality in EJS

When I attempt to include a file in my EJS document, everything works smoothly. HTML report.ejs <tbody> <%- include('include/playersTable'); %> </tbody> Javascript $.get('/reports.ejs', functio ...

Limit the focus to the dialog box using JavaScript

Is there a way to limit the tab and shift-tab key focus to only cycle through input elements within a specific popup dialog in HTML? I have a div with a high z-index that contains these input elements, and I want to restrict the keyboard navigation to st ...

What is the best way to declare a global TypeScript variable in a definition file to make it accessible for import?

My issue revolves around an external JS library that contains a global parameter: function Thing() { ... } ... var thing = new Thing(); I have a TypeScript definition file named thing.d.ts with the following content: declare var thing: ThingStatic; ex ...

How come my data is not appearing on the screen despite receiving a result in the console log?

I am facing an issue with displaying data obtained from Supabase. I am passing the data as a prop and using map to iterate over it in order to show the required values. However, despite logging the correct results for `programme.title`, nothing is being re ...

Tips on adding several elements to an array depending on the selected value from various checkboxes?

I am working on a project where I need to populate an array based on selected checkboxes. Let's assume we have 3 arrays containing strings: const fruits = ["Apple", "Banana", "Orange", "Grapes"]; const vegetable ...

Unable to specify a particular <div> for fetching data using jQuery AJAX in ASP.NET

While working on the following Javascript code, I encountered an issue where the text specified inside the CommentItem div I am appending is not displaying. However, my main concern revolves around targeting ContainerPh which is located above the txtCommen ...

Is axios allowed to be used in this scenario?

As a newcomer to web development, I apologize in advance if my question seems basic or if the details provided are insufficient. Nevertheless, I hope you can assist me with the following query: Is it possible to execute an axios.post request within a vue. ...

Leveraging Github CI for TypeScript and Jest Testing

My attempts to replicate my local setup into Github CI are not successful. Even simple commands like ls are not working as expected. However, the installation of TypeScript and Jest appears to be successful locally. During the Github CI run, I see a list ...

The issue with AngularJS Routing is that it fails to refresh the menu items when the URL and views are being

My current project involves implementing token-based authentication using the MEAN stack. The goal of my application is to display different menu items based on whether a user is logged in or not. When there is no token present, the menu should show option ...