Tips for successfully including a positive sign character in string values within JSON in the URL's hash fragment

I am facing an issue with my JS (Angular) app where I load parameters from the URL fragment after the # sign. These parameters contain JSON objects, like this example:

...#filters={"Course":["ST_12.+13.12.2016 [Basel]"]}

The aim is to open a data-grid and pre-filter some of the data, making the object quite generic. However, the problem arises when any string like this gets converted to:

filters=%7B%22Course%22:%5B%22ST_12.+13.12.2016+%5BBasel%5D%22%5D%7D

resulting in:

...#filters={"Course":["ST_12. 13.12.2016 [Basel]"]}

It loses the + and replaces it with a space. One solution would be to encode the + character as %2b, like so:

filters=%7B%22Course%22:%5B%22ST_12.%2B13.12.2016+%5BBasel%5D%22%5D%7D

but unfortunately, this approach fails. As soon as you input this into a browser (Chrome/Firefox), the %2b gets decoded back into a + directly in the URL field, causing the original issue to resurface.

I have researched online but most responses deal with basic queries regarding why spaces need to be encoded as + symbols. My concern lies in passing a normal string value that includes actual text along with + characters reliably.

javascriptangularjsjsonurlsingle-page-application

Answer №1

Have you attempted to utilize the window.decodeURIComponent() method? I successfully decoded the string by employing the decodeURIComponent() function, which resulted in the correct format including the + and all other characters you had encoded.

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

Automatically navigate to the bottom of the page by applying the overflow auto feature

I've been working on a chat application using Vue.js. I have set the overflow property to auto for my div element. My goal is to automatically scroll to the bottom of the div so that users won't have to manually click the scrollbar to view the la ...

javascriptjqueryvue.jsvue-component

What is the best way to ensure my button displays the complete description of a single country after showcasing all the countries?

I have designed a search feature for countries and I am looking to add a button next to the country names that will trigger one of my components responsible for displaying detailed information about the country. Currently, the details are shown only when t ...

javascriptjsonreactjs

Issues with Vue Sortable functionality may be causing complications

Currently, I am utilizing vue-sortable and draggable. Although I am able to drag an item above and change its position, the JSON data does not refresh. Here is the existing list: <draggable v-model="this.$store.getters.getDocument.getDocumentAttributes ...

javascriptjsonvue.jsvuejs2

Challenge with Karma runner running tests

Currently, I am in the process of developing an application that utilizes Karma as a testing tool to run test cases. Unfortunately, I have encountered an issue where the test cases do not execute and instead get stuck at a certain point. When attempting to ...

angularjskarma-runner

What causes a Next.js App to crash when a prop is not defined in destructuring code?

Let me share the issue I am facing. I have developed a custom Context API wrapper to handle all my data. However, there is this docType property that may not always be defined or may not exist at times. When I destructure it in this way: const { docType } ...

javascriptnext.js

The changes made to $scope in AngularJS are not being displayed in the view

The View Section <div class="col-sm-8" data-ng-init="init_enable_disable()"> <select class="form-control" style="margin-top: 5px;" data-ng-model="schedule.scheduleType" data-ng-change="enable_disableDiv(schedule.scheduleType);"> ...

javascriptangularjs

MUI: Issue with pseudo element appearing cropped outside of Paper container

I am facing an issue where a red arrow pseudo element '::before' is partially cut off outside its container '.MuiPaper-root'. I need the arrow to remain visible, any suggestions on how to fix this? Here is the relevant code snippet and ...

javascriptcssreactjsmaterial-ui

Sending a JSON array in vb.net code

I am facing an issue with sending a json data array value called "datavalue" to my webmethod. Despite searching for answers, I have not been able to find a solution yet. It seems like there might be something wrong with my code. Below is the snippet of my ...

ajaxjsonvb.net

Develop interactive div elements with the help of JavaScript/jQuery

Exploring dynamic div creation using javascript or jquery and looking for guidance. <div id="clickable"> <button class="start">Default</button> <button class="random">Randon</button> <button class="gradient"> ...

javascriptjquerycsshtml

Is there a way to ensure that a "catch all other" route in the Vue Router will also capture the URL if a portion of it matches a predefined route?

After following the suggestion to implement a catch all route from this article, I realized that it does not capture URLs that partially match a defined route. routes: [ { path: "/album/:album", name: "album", component: Album, } ...

javascriptvue.jsredirectvue-router

As I attempted to set up sb-admin-bs4-angular2-master, an application built with Node.js, I encountered an error message while running the npm install command

view image details here After running npm install -g ts-node, I proceeded with npm install only to encounter an error that left me clueless. Subsequently, when attempting npm start, a series of errors related to the gulp server or similar issues emerged. ...

angularjsnode.jsnpmgulpangular-ui-bootstrap

Preserve a data point without causing any alterations

I am working with a device that continuously sends values until it is stopped. These values are then saved inside an array. deviceMonitoring( device2 ){ // In this function, I populate the arrayTimestamp and then copy the first value. this.arrayElement = t ...

javascriptreactjsreact-native

When the state inspection fails due to a missing object property, the function will not work as intended

I'm currently in the process of developing a weather app. The user will input either a zip code or a city name + state, triggering the $.getJSON function to gather data. One key feature I am working on involves checking if the user's input is va ...

javascriptjqueryobjectif-statementgetjson

Comparison: NumberFormatter versus NumberFormat in PHP and JavaScript

My attempts to format currency seem to yield inconsistent results. Using PHP with the NumberFormatter class, here's a snippet of my code: $number = 5125.99; echo getInternationallyFormattedCurrency($number, 'tl-PH', 'PHP'); echo & ...

javascriptphpinternationalization

leveraging jQuery across an Angular 2 application as a global tool

I'm currently exploring ways to incorporate jQuery globally throughout my angular 2 application. The only comprehensive resource I've come across so far is this Stack Overflow answer. However, despite my efforts, I haven't been able to make ...

javascriptjqueryangularnpm

Modify the size of images while shuffling using Javascript

Hey there! I've got some bootstrap thumbnails set up and I'm using a script to shuffle the images inside the thumbnails or a element within the li. It's working fine, but some of the images are coming out larger or smaller than others. I&apo ...

javascripthtmltwitter-bootstrap

Develop a custom script function for every instance of a @foreach loop

I have a challenge where I need to style automatically generated table rows by clicking on a button. Currently, my code appears as follows: @foreach($tours as $tour) <tr id="{{$tour->id}}"> <td> {{$tour->tournr}} &l ...

javascripthtmllaravel

The functionality of Jquery UI is not compatible with version 1.12

Incorporating jQuery UI into my current project has presented some challenges. Both the jquery-ui.min.css and jquery-ui.min.js files are version 1.12, so I opted for the latest jQuery version, jquery-3.2.1.min.js. Specifically, I decided to test the datep ...

javascriptjquerycssjquery-ui

Jquery Mobile: Navigating back to the first page after calling changePage

In the process of developing a mobile app with phonegap/cordova and jquery mobile, I encountered an issue where the user is supposed to land on a specific page from a status bar notification. However, the app initially displays the default page briefly bef ...

javascriptjquerycordovajquery-mobile

Tips on handling json files and constructing an lstm model?

I'm currently working on implementing LSTM on the HP news dataset, which is stored in JSON format (). I attempted to run this code and encountered errors. I'm unsure what's causing the issue with this code? from keras.layers import LSTM, Act ...

jsonmachine-learningdeep-learninglstm