1

I have a textbox which accepts user defined key value pairs like: {'Apple':'Red', 'Lemon':'Green'} and i want it to be converted to an array of key value pair. I have code:

var color= document.getElementById('txtColor').value;

The problem is i get it just as a string if i try: color['Apple'] it shows undefined; whereas i expect 'Red'. How can i do the conversion so that i get something like:

var color={'Apple':'Red', 'Lemon':'Green'}

and get value 'Red' on color['Apple']. Thanks in advance.

developer n
  • 43
  • 6
  • You could enforce JSON syntax in the textbox (in your case: replace the single quotes with double quotes), then you can simply parse the content into a native object using ```JSON.parse(color)``` – The Coprolal Sep 18 '19 at 13:08
  • Replacing single quotes with double quotes in the textbox and then JSON.parse for the value did the trick. Thanks! Just a clarification or doubt more on that. How can i make it ignore case sensitive. Like if user gives apple in the string and in my code i need to check for the value. i dont get 'Red' in that case if i have in my code 'Apple'. I saw some codes to convert to lowercase or uppercase etc; but is there another way to handle the situatiion. Thanks. – developer n Sep 18 '19 at 13:20
  • No, there isn’t, not if you want to be able to access the value via `color['Foo']` afterwards, then you need to convert a possible key `foo` inside of your data array directly. (But if such simple case discrepancies are a case for concern here already, then the possibility of the user messing up the pseudo-JSON syntax here is probably even higher …) – 04FS Sep 18 '19 at 13:42

3 Answers3

1

I assume following

let color = document.getElementById('txtColor').value; // This line returns {'Apple':'Red', 'Lemon':'Green'}

If I'm correct you can do following

try {
  // Here you can write logic for format json ex. Convert single quotes to double quotes 
  // This may help to convert well formatted json string https://stackoverflow.com/questions/4810841/how-can-i-pretty-print-json-using-javascript
  let colorJson = JSON.parse(color);
  console.log(colorJson["Apple"]) // This will return your expected value.
} catch(e) {
  console.log('Invalid json format')
}
Richardson. M
  • 852
  • 2
  • 17
  • 28
1

I have a similar usecase. You have to JSON.parse() the value.

var obj = JSON.parse(document.getElementById('txtColor').value.replace(/'/g, '"'));

console.log(obj['Apple']);
<textarea id="txtColor">{'Apple':'Red', 'Lemon':'Green'}</textarea>
tom
  • 9,550
  • 6
  • 30
  • 49
1

var color = document.getElementById('txtColor').value;

//JSON.stringify will validate the JSON string
var jsonValidString = JSON.stringify(eval("(" + color + ")"));

//If JSON string is valid then we can conver string to JSON object
var JSONObj = JSON.parse(jsonValidString);

//We can use JSON.KeyName or JSON["KeyName"] both way you can get value
console.log(JSONObj.Apple, " --- ", JSONObj["Apple"]);
console.log(JSONObj.Lemon, " --- ", JSONObj["Lemon"]);
<input id="txtColor" value="{'Apple':'Red', 'Lemon':'Green'}" type="text" />
ankitkanojia
  • 3,072
  • 4
  • 22
  • 35