2012-04-21 15 views
8

選択した4つの選択メニューから派生したJSONオブジェクトを作成したいとします。これらのメニューには、(サーバー側の技術のため)読み込まれたときにオプションが選択されている場合や、選択されているオプションがない場合があります。 $(document).ready()を使用してページが読み込まれると、スクリプトが実行されますが、JSONオブジェクトにいくつかの問題が発生します。 "JSON.parse:予期しない空白文字がJSONデータ後JSON.parse:予期しない非空白文字(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 

    } 

}; 

オーケーを持っている私のJSONは私の機能だしたい、私は簡単にするために、ここでいくつかの項目を削除したが、私は、引数として関数に、元の空のオブジェクトを渡した後、修正することを望んでいますこれは、選択メニューが変更されたときにJSONオブジェクトをサーバーに渡したいと思っているからです...しかし、今はページロードを扱っています...この関数はth e値、またはdefaultTable()という関数を使用して作成されたダイナミックテーブルで選択されているものは、今のところ無視しています。興味のあるJSONオブジェクトを作成している(問題がある)。私は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? 
      } 
     } 
    } 

} 

は、私がやろうとしていることが、私はこれをやっていないよ...ループしながら、その後、jQuery.parseJSONメソッドを使用してオブジェクトにこれらをひそかCONCATENATE文字列であります正しく私もtemp1を作成するときに引用符を変更しようとしました。

私はこれが複雑であることを知っていますが、私はたくさん質問しているかもしれませんが、誰かが私が間違っていることを見ることができます。私はjQuery.parseJSONに精通していないので、私は怒っていると思うので、どんなアドバイスも素晴らしいだろう!

私は漠然としているかだけでなく自分自身を説明していないよ場合は言ってくださいので...私もバイオリンでこれを入れている... http://jsfiddle.net/itakesmack/JSRt7/1/

これはSOいくつかの項目が欠落している可能性がWORKING PROGRESSであることに注意してください開発する必要があります(または私は他のバグがあるかもしれませんが、私は望みません)。

+13

文字列関数を使用してJSONを構築しないでください。適切なオブジェクトに 'JSON.stringify()'を使用してください。 – ThiefMaster

+0

それは素晴らしいアドバイスです...私はそれを行って、感謝します! –

+1

JSONの実際のコメントをJavaScriptのように追加しないでください。 JSONはそれらを許可しません(あなたがオブジェクトの一部としてそれらを含める場合を除きます)。 –

答えて

3

あなたはparseJSON()'"catOptions":"{"A":"B","C":"D",}"' parseJSONは()あなたはJSONを構築しようとしている場合に対処するためのいくつかの問題を持っているこの'{"catOptions":{"A":"B","C":"D"}}'

のようなものを望んでいるように見える文字列を供給しています手で。あなたが引用符であなたの{key:value}をラップしたくないあなたのエラーを修正するには

、彼らはcatOptForObj

内の引用符によって破壊されているあなたは、彼らが含まれている可能性がある場合、あなたがしてOptForObj文字列を構築している値をエスケープする必要があります二重引用符

あなたは基本的にこのようなあなたの文字列を構築している。

"A":"B","C":"D",

のようなものが生成されます
s = s + '"' + A '":"' + "B" + '",'; 

カンマは値の間にのみ存在する必要があります。これを行う1つの方法は、sが最初に空であるかどうかを確認し、追加値の前にsに追加するだけです。次のようなものがあります。

JSONなどの組み込み関数に頼るのが最も良い方法です。コメントに示唆したとおりに文字列化してください

0

JSONオブジェクトに値を追加するには、文字列を使用してください。

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

代わりに、JSONのさまざまなキーに値を割り当てるために次のような方法を試すことができます。

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

関連する問題