我有一个像这样的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
});
});
任何人都有任何提示我如何解决这个问题?
答案 0 :(得分:2)
obj.data中没有element.amount。年龄和性别都存在。
我正在迭代数据对象,检查是否有任何值匹配。我假设这些将是唯一的记录,否则金额将被覆盖。
$(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
});
});