1

次のような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"}

ユーザー入力に基づいて価格を表示するための小さな「計算機」を構築しようとしています。

<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

    });


});

どうすればこれを解決できるか、誰にもヒントがありますか?

4

1 に答える 1

2

obj.data に element.mount がありません。年齢と性別があります。

値が一致するかどうかをチェックするデータオブジェクトを繰り返し処理しています。これらは一意のレコードになると想定しています。そうしないと、金額が上書きされます。

このフィドルを見る

$(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

});


});
于 2013-02-15T09:39:31.793 に答える