4 つの選択メニューの選択されたオプションから派生した JSON オブジェクトを作成したいと考えています。これらのメニューでは、(サーバー側の技術により) ロード時にオプションが選択されている場合と、オプションがまったく選択されていない場合があります。$(document).ready() を使用してページが読み込まれると、スクリプトが実行されます... しかし、JSON オブジェクトでいくつかの問題が発生します “<strong>JSON.parse: JSON データの後に予期しない非空白文字”</p>
JSONに次の構造を持たせたい
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
}
};
さて、これが私の関数です。単純化するためにいくつかの項目を削除しましたが、元の空のオブジェクトを関数に引数として渡し、これを修正したいと考えています。 /選択メニューが変更されたとき...しかし、今のところ、ページの読み込みを扱っているだけです...関数は、値または動的テーブルで選択されているものも表示します。これは、関数を使用して作成されますdefaultTable()。私が興味を持っている（そして問題を抱えている）JSONオブジェクトの入力。
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's 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's 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?
}
}
}
}
JSON オブジェクトの作成に問題があります。ループ中に文字列を連結し、jQuery.parseJSON メソッドを使用してこれらをオブジェクトに変換しようとしていますが、これを正しく行っていません。temp1 を作成するときに引用符を変更しようとさえしました。
私はこれが複雑であることを知っており、私は多くの質問をしているかもしれませんが、私が間違っていることを誰でも見ることができます. 私は jQuery.parseJSON に精通していないので、気が狂いそうなのでアドバイスをいただければ幸いです。
私が漠然としている、または自分自身をよく説明していない場合は、そう言ってください...これもフィドルに入れました... http://jsfiddle.net/itaksmack/JSRt7/1/
これは進行中の作業であるため、一部のアイテムが欠落しているか、開発が必要であることに注意してください (または、他のバグがある可能性があります... しかし、そうでないことを願っています)。