2014-09-03 166 views
1

我目前正在在基於JS-形式的處理器,需要表單字段和定義它們基於所述name=屬性爲多個級別的對象:的Javascript:訪問多維對象屬性

<input type="number" step="1" min="1" max="12" name="ui.house.occupant.adult.count"> 

使用form2js插件,它創建一個對象。在這種情況下,console.log顯示的UI對象如下: http://i58.tinypic.com/2gy9duu.jpg

然而,每當我嘗試任何事情,如alert(ui.house.occupant.adult.count)訪問我的JS代碼這個屬性,它拋出的錯誤house是不確定的。你可以看到:http://i59.tinypic.com/2guz7s7.jpg

我在絞盡腦汁想弄清楚問題在哪裏。當我使用alert(ui.house)時,它會返回空白警報。 這導致我認爲form2js在我嘗試訪問它之前實際上沒有正確處理表單數據,但是我試圖使用諸如setTimeout之類的東西無濟於事。

對於上下文,我加載了一個外部CSV文件,該文件預填充了用戶可以選擇的數據的表單字段,因此爲什麼第二個屏幕截圖顯示在$ .ajax函數內部。

謝謝!

編輯:的代碼更完整的示例:

<fieldset id="user_input"> 
<div class="question_row"> 
    <label for="ui.house.ng.available">Is natural gas available in your street?</label> 
    <div class="question"> 
     <input type="radio" name="ui.house.ng.available" value="True"> Yes 
     <input type="radio" name="ui.house.ng.available" value="False"> No 
     <input type="radio" name="ui.house.ng.available" value="False"> Don't know 
    </div> 
</div> 
<div class="question_row"> 
    <label for="ui.house.occupant.adult.count">How many people live in your home?</label> 
    <div class="spec_people question"> 
     Adults: 
     <input type="number" step="1" min="1" max="12" name="ui.house.occupant.adult.count"> 
     Children: 
     <input type="number" step="1" min="1" max="12" name="ui.house.occupant.child.count"> 
    </div> 
</div> 
</fieldset> 

而完整的Ajax功能 - 這拉動外部CSV並填充<option>元件表單字段以及限制屬性。

var ui = new Object; 

// Load our external spreadsheet containing constants, questions, and other definitions. Format it nicely. 
$.ajax({ 
    url: "DSD_Master_Constants.csv", 
    async: false, 
    dataType: "text", 
    success: function (csvd) { 
     data = $.csv2Array(csvd); 
        // call a function on complete 
     $.each(data, function(index, rows){ 
      // 0 Constant Type 
      // 1 Constant category 
      // 2 Constant subcategory   
      // 3 
      // 4 
      // 5 
      // 6 
      // 7 Value (min) 
      // 8 Value (max) 
      // 9 Custom option? (separate with comma) 
      // 10 Custom option value (same sequence) 
      // 11 Unit of measurement 
      // 12 Field type 
      // 13 Helpful tip 
      // 14 Object code 
      if(rows[0] == 'User'){ // Populate User Input Fields 
       var inputf = $("[name='"+rows[14]+"']"); 
       var htmldat = ''; 
       switch(rows[12]){ 
        case 'number': 
         inputf.attr({ 
          value: rows[7], 
          placeholder: rows[7], 
          min: rows[7], 
          max: rows[8] 
         }); 
         break; 
        case '': // must be text field 
         break; 
        case 'select': 
         if(rows[9] == ''){ // No custom option, means use min and max values 
          var minno = rows[7]; 
          var maxno = rows[8]; 

          while(minno <= maxno){ 
           htmldat += '<option value="' + minno + '">' + minno + ' ' + rows[11] + '</option>  \ 
           '; 
           minno = parseFloat(minno) + 1; 
          } 
          inputf.html(htmldat); 
         } else { // Must be using a custom option/value set 
          var custom = rows[9].split(', '); 
          var customv = rows[10].split(', '); 
          for(var a in custom){ 
           if(customv[a] == ''){ customv[a] = custom[a]; } 
           htmldat += '<option value="' + customv[a] + '">' + custom[a] + '</option> \ 
           '; 
          } 
          inputf.html(htmldat); 
          htmldat = ''; 
         } 
         break; 
        case 'radio': 

         break; 
       } 

      } 
     }); 
     ui = $("#user_input").toObject(); // Splits form data into objects and sub-objects, based on delimiter (in this case, period '.') 
     console.log(ui); 
    }, 
    complete: function() { 
     alert(ui.house.occupant.adult.count); 
    } 
}); 

我希望這是有道理的 - 我試圖簡化它,以節省人們不得不通過我的整個代碼 - 我的壞!

+0

請給你的代碼的更完整的例子:看http://stackoverflow.com/help/mcve;一種方法是把你的代碼放在jsfiddle中。 也請使用代碼塊,而不是截圖。 猜測這是一個範圍問題,但直到顯示大圖時才能分辨出來。 (尤其是聲明UI對象的地方) – 2014-09-03 02:05:50

+0

ui的變量範圍是什麼? – Igor 2014-09-03 02:23:45

+0

'ui'變量是一個全局對象集,將在當前頁面的其他函數中使用 - 希望能回答你的問題。 – 2014-09-03 02:29:05

回答

1

當你做了ui = $(「#user_input」)。toObject(); 用戶界面成爲您的用戶界面對象中的一個字段。

要訪問您需要做ui.ui.house的房子。

仔細看看form2js回報

+0

你是上帝。非常感謝 - 最近兩天我花了我的大腦 - 我想要解決這個問題,我需要做的就是刪除'ui'。在每個輸入字段的開始處。但是,我已經有了基於現有名稱的函數和選擇器,所以我剛剛將'ui'對象重新定義爲'ui = ui.ui;'。真誠地謝謝你。 – 2014-09-04 05:50:17

0

在您提供的HTML,有一個與在你的代碼中引用「USER_INPUT」的ID不輸入元素:

ui = $("#user_input").toObject(); // Splits form data into objects and sub-objects, based on delimiter (in this case, period '.') 

也許你並沒有包括所有的HTML,但你」已經提供,看起來你正在嘗試訪問一個不存在的元素。

+1

整個表單被封裝在一個'

'中,我忘了將它包含在我的HTML代碼片段中。抱歉! – 2014-09-03 02:27:04