過濾JSON對象選擇

Question

我有一個JSON對象是這樣的：

{"age":"18","50000": "641","100000": "1011","150000": "1391","gender":"female"}, 
{"age":"18","50000": "642","100000": "1012","150000": "1392","gender":"male"}, 
{"age":"20","50000": "643","100000": "1013","150000": "1393","gender":"male"} 

林試圖建立一個小「calulator」爲示出了基於用戶輸入的價格：

<label for="gender">Gender</label> 
    <select id="gender" name="gender"> 
    <option value="Female">Female</option> 
    <option value="Male">Male</option> 
    </select> 


<label for="amount">Amount</label> 
    <select id="amount" name="amount"> 
    <option value="50000">500 00</option> 
    <option value="100000">1 00000</option> 
    <option value="150000">1 50000</option> 
    </select> 


<label for="age">Age</label> 
<input id="age" name="age" type="text" /> 

這是我嘗試過的JavaScript，但似乎無法理解我如何進行過濾並從窗體中顯示正確的值。

$(document).ready(function() { 

    //JSON object 
    var obj = {"data": 
    [ 
     {"age":"18","50000": "641","100000": "1011","150000": "1391","gender":"female"}, 
     {"age":"18","50000": "642","100000": "1012","150000": "1392","gender":"male"}, 
     {"age":"20","50000": "643","100000": "1013","150000": "1393","gender":"male"} 
    ] 

    }; 


    //Find the value when form is submitted 
    $('#target').submit(function() { 

     obj.data = jQuery.grep(obj.data, function(element, index){ 
      return element.age && element.gender && element.amount; // retain appropriate elements 

     });  

     //Empty the div 
     $('#price-result').empty(); 

     //Show the result in div 
     $("#price-result").append("Age: element.age, Gender: element.gender, Amount: element.amount, Price: element.price-from-json"); 

     return false;//Stop page from reloading 

    }); 


}); 

任何人有任何提示，我可以如何解決這個問題？

Answer 1

obj.data中沒有element.amount。年齡和性別在那裏。

我遍歷數據對象檢查是否有任何值匹配。我假設這些將是獨特的記錄，否則數量將被覆蓋。

看到這個fiddle

$(document).ready(function() { 

//JSON object 
var obj = {"data": 
[ 
    {"age":"18","50000": "641","100000": "1011","150000": "1391","gender":"female"}, 
    {"age":"18","50000": "642","100000": "1012","150000": "1392","gender":"male"}, 
    {"age":"20","50000": "643","100000": "1013","150000": "1393","gender":"male"} 
] 

}; 


//Find the value when form is submitted 
$('#calc').click(function(e) { 
    e.preventDefault(); 

    var data = jQuery.grep(obj.data, function(element, index){ 
     return element.age && element.gender; // retain appropriate elements 

    });  

    var selectedGender = $('#gender').val().toString().toLowerCase(); 
    var selectedAmount= $('#amount').val().toString().toLowerCase(); 
    var selectedAge = $('#age').val().toString().toLowerCase(); 

    var amount = ""; 

    $.each(data,function(k, v){ 

     if(data[k].age.toString().toLowerCase() == selectedAge && 
      data[k].gender.toString().toLowerCase() == selectedGender && 
      data[k][selectedAmount] != undefined){ 

      amount = data[k][selectedAmount]; 


     } 

    }); 


    //Empty the div 
    $('#price-result').empty(); 

    //Show the result in div 
    var displayText = "Age: " + selectedAge + ", Gender: " + selectedGender + ", Amount: " + amount + ", Price: element.price-from-json"; 

    $("#price-result").append(amount == "" ? "No Results" : displayText); 

    return false;//Stop page from reloading 

}); 


});