JSON.parse: unexpected character with no spaces after JSON data

Question

I want to create a JSON object that is obtained from the selected options from 4 selection menus. These menus may have parameters selected at boot (due to server-side technology) or may not have any parameters! Once the page loads using $ (document) .ready () my script works ... however Im getting some problems with the JSON object " JSON.parse: unexpected character with no spaces after the JSON data "

I want my JSON to have the following structure

selObj = { category: selectedCategory, // we can only have 1 category, this isn't giving me a problem… catOptions:{ optionValue:discountValue, // we can have many of these optionValue:discountValue, optionValue:discountValue }, tariff:{ tariffValue:discountValue, // we can have many of these tariffValue:discountValue }, tarOptions:{ tarOption:discountValue, // we can have many of these } }; 

Ok, my function, Ive removed some elements here to simplify, but Im passed the original empty object to the function as an argument, and then hoped to change this as I want to pass the JSON object back to the server if / when the select menu is selected .. .but now they just concerned page loading ... the function also shows the values ​​or what is selected in the dynamic table created using the function called defaultTable() , just ignores that at the moment its populating the JSON object Im interested in (and has problems with).

 var selectMenuArray = ["cat", "catOpt", "tariff", "tariffOpt"], // these are the IDs of the select menus... selObj = {}; function setUpTable(selectArray, theObj){ // okay, if we enter the page and and the user already has a tarif selected (so it is shown in the menus) we wish to show the table with the // default/original values... var currentSelect, catA = [], catOptA = [], tarA = [], tarOptA = [], catOptForObj, tariffForObj, tariffOptForObj, temp1 = {}, temp2 = {}, temp3 = {}, i; // loop through the 4 menus and see what is selected for(i=0;i<selectArray.length;i++){ // let look at the options to see if any are selected by looping through the <option> currentSelect = document.getElementById(selectArray[i]); for(j=0;j<currentSelect.length;j++){ // do we have an options with the selected attribute? if(currentSelect.options[j].selected == true){ // okay, we need to make sure the table is shown then the correct values are shown? // we know what the Menu is... selectArray[i], and this is the text... currentSelect.options[j]. // lets build up whet selected in Arrays... switch(selectArray[i]){ case "cat": catA.push(currentSelect.options[j].value); break; case "catOpt": catOptA.push(currentSelect.options[j].value); catOptForObj = catOptForObj + '"' + currentSelect.options[j].value + '":"' + "% to come later" + '",'; break; case "tariff": tarA.push(currentSelect.options[j].value); tariffForObj = tariffForObj + '"' + currentSelect.options[j].value + '":"' + "% to come later" + '",'; break; case "tariffOpt": tarOptA.push(currentSelect.options[j].value); tariffOptForObj = tariffOptForObj + '"' + currentSelect.options[j].value + '":"' + "% to come later" + '",'; break; default: // no default? } } } } // now we can build the table if(catA.length > 0 || catOptA.length > 0 || tarA.length > 0 || tarOptA.length > 0){ // show table... $("#dynamicTableHolder table").css("visibility","visible").hide().fadeIn('slow'); for(i=0;i<selectArray.length;i++){ switch(selectArray[i]){ case "cat": defaultTable(catA, "dtCats"); theObj.cat = catA[0]; break; case "catOpt": defaultTable(catOptA, "dtTariffs"); temp1 = '"{' + catOptForObj.substring(0, catOptForObj.length-1).replace(/undefined/g, "") + '}"'; theObj = jQuery.parseJSON('"catOptions":' + temp1); break; case "tariff": defaultTable(tarA, "dtCatOpts"); temp2 = "{" + tariffForObj.substring(0, tariffForObj.length-1).replace(/undefined/g, "") + "}"; //theObj = jQuery.parseJSON('"tariff":' + temp2); break; case "tariffOpt": defaultTable(tarOptA, "dtTariffOpts"); temp3 = "{" + tariffOptForObj.substring(0, tariffOptForObj.length-1).replace(/undefined/g, "") + "}"; //theObj = jQuery.parseJSON('"tarOptions":' + temp3); break; default: // no default? } } } } 

I'm having trouble creating a JSON object, what I'm trying to do is concatenate strings during a loop and then hide them for objects using the jQuery.parseJSON method ... however, I am not doing it right. Ive even tried changing quotes when creating temp1.

I know this is difficult and I can ask a lot of questions, but someone can understand what I'm doing wrong. I am not familiar with jQuery.parseJSON, so any advice would be great as I think I'm crazy!

If I'm vague or don't explain myself well, say so ... I also put this on the violin ... http://jsfiddle.net/itakesmack/JSRt7/1/

PLEASE PAY CAREFULLY WORKING PROGRESS THAT SOME DETAILS MAY BE WRONG OR NEED TO WORK (or I may have other errors ... but I hope not).

Answer 1

You load parseJSON () a line that looks like '"catOptions":"{"A":"B","C":"D",}"' parseJSON () wants something like this '{"catOptions":{"A":"B","C":"D"}}'

You have several problems that you will have to deal with if you intend to create JSON manually.

To fix your mistake, you do not want to wrap the {key:value} in quotation marks, they are broken into quotation marks inside catOptForObj

You will need to avoid the values ​​that you build OptForObj strings if they can contain double quotes

Basically you build your line like this:

 s = s + '"' + A '":"' + "B" + '",'; 

which will create something like "A":"B","C":"D",

The wrists should exist only between meanings. One way to do this is to check if it is empty first, and only add it to s before your extra value. Something like:

 s = (s.length?(s+','):'') + '"' + A + '":"' + "B" + '"'; 

What would be best to rely on a built-in function such as JSON.stringify as suggested in the comments

Answer 2

To add values ​​to a JSON object, you use a string.

 catOptForObj = catOptForObj + '"' + currentSelect.options[j].value + '":"' + "% to come later" + '",'; 

Instead, you can try the following convention to assign values ​​to different keys in JSON.

catOptForObj[currentSelect.options[j].value] = "% to come later";