0

I'm creating a project where I have a Django server sending JSON data to a template which has Vue.js running on it. The JSON data is sending values with a trailing space after them which is causing problems. I'd like to remove them on the HTML page if possible.

I've tried using Javascript.trim() on the JSON data which didn't seem to have any effect. I also can't strip the entire JSON file of whitespace, since some values need to have whitespace in them.

I am trying to remove whitespace from {"keyword" : "value"} sets. The "value" section sometimes has "value " or " value" in them.

This won't work
<option value="And">And</option>

But this will
<option value="And ">And</option>

The JSON object contains

"keyword": "And "

Instead of

"keyword": "And"

I expect the tag to work regardless of the whitespace surrounding the value in the data.

Edit: I can't use Javascript's trim() function, since there are dozens of occurences of the issue in the JSON data. Looping through the data and trimming each individual string would significantly increase the load times for the page.

Edit2:

<b-form-select for="action-text" v-model="step.keyword" class="mx-3">
    <option value="Given ">Given</option>
    <option value="When ">When</option>
    <option value="Then ">Then</option>
    <option value="And ">And</option>
    <option value="But ">But</option>
</b-form-select>

Where in this would I do as needed trimming?

Dhyan Patel
  • 31
  • 3
  • `.trim()` should definitely do the trick, please show a [mre]. –  Jul 10 '19 at 20:50
  • Also potentially relevant for Python: https://stackoverflow.com/questions/761804/how-do-i-trim-whitespace-from-a-string – VLAZ Jul 10 '19 at 20:51
  • Why are you looking to solve this client side? Fix it at the source – charlietfl Jul 10 '19 at 20:52
  • @charlietfl Unfortunately I'm using a very niche library to gather the data I'm using, and the library creates the JSON objects that I'm sending to the template. I tried looking into the source code for it, but I doubt I'd be able to fix the issue there. – Dhyan Patel Jul 10 '19 at 20:58
  • OK..but as per your edit ... you can trim on an as needed basis. Not sure what sort of answer you really expect. Sounds like a bug in the library and rather than solving the bug you are throwing a band aid on the front end – charlietfl Jul 10 '19 at 21:04
  • How would I trim as needed? I've included a code snippet in my edit @charlietfl – Dhyan Patel Jul 10 '19 at 21:10
  • How about when a value is selected? Or before it gets submitted? Going though the initial data load recursively is probably the safest bet....either server side or when you receive it client side. Since it comes in as json you can use JSON.parse `reviver` ... https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/JSON/parse – charlietfl Jul 10 '19 at 21:14

1 Answers1

0

You can trim both key and value using the following function:

function trimObj(obj) {
  if (!Array.isArray(obj) && typeof obj != 'object') return obj;
  return Object.keys(obj).reduce(function(acc, key) {
    acc[key.trim()] = typeof obj[key] == 'string'? obj[key].trim() : trimObj(obj[key]);
    return acc;
  }, Array.isArray(obj)? []:{});
}

var a = '{ "name":"John ", "age":30, "city":" New York"}';
console.log(trimObj(JSON.parse(a)));

Or alternatively, You can stringify it, string replace, and reparse it

JSON.parse(JSON.stringify(badJson).replace(/"\s+|\s+"/g,'"'))

Answered here

LIGHT
  • 5,604
  • 10
  • 35
  • 78