3

Jobs.jsonファイルからjsonを取得するためのこのajaxコードがあります。

 $(document).ready(function(){
        $('#btn2').click( callJobs );
        });

function callJobs()
{


     alert("getting results...");
    $.getJSON('Jobs.json', function(JSON){
        $('#result').empty();

        $.each(JSON.jobs, function(i, JOB){
            $('#result')
            .append(JOB.Job +'<br />')
            .append(JOB.Priority+'<br />')
            .append(JOB.DueDate+'<br />')
            .append(JOB.Iscompleted+'<hr />');
      });
    });
}

Jobs.jsonのコードは以下のとおりです。

{
"jobs":[
  {
     "Job":"Job1",
     "Priority":"Low",
     "DueDate":"11.03.2013",
     "Iscompleted":"No"
  },
  {
     "Job":"Job2",
     "Priority":"High",
     "DueDate":"11.03.2013",
     "Iscompleted" : "No"
  },
  {
     "Job":"Job3",
     "Priority":"Medium",
     "DueDate":"11.03.2013",
     "Iscompleted":"No"
  }
  ]
  }

ここで、$。each関数を動的に書き直したいと思います。つまり、.append（）の代わりにキーと値としてjson文字列を書き込みます。

4

2 に答える 2

1

これが私のアプローチです。プロセスを説明するコメントを追加しました。

$.each(JSON.jobs, function(i, JOB) {
    // an empty array for the output values
    var values = [];
    // iterator over each property in the current JOB object
    for (var prop in JOB) { 
        // add an item to the array in format "key: value"
        values.push(prop + ': ' + JOB[prop]); 
    }
    // join the array values using '<br />' as separator; 
    // append to #result and add an '<hr />' after
    $('#result').append(values.join('<br />')).append('<hr />');
});

このソリューションの私の目標は、（配列を追加することを犠牲にして）読み取り可能に保ち、要素を1回だけ選択し、各ループ中に#result最後に追加するかどうかを知る必要がないことでした。他のソリューションは、最後のプロパティの後と前に<br />余分なものを追加しますが、これと元のソリューションは追加しません。<br /><hr />

于 2013-03-11T14:55:07.227 に答える
1

これにより、各ジョブのプロパティが動的にウォークオーバーされます。

$.getJSON('Jobs.json', function(JSON){
    var $container = $('#result').empty();

    $.each(JSON.jobs, function(i, JOB) {
        $.each(JOB, function(key, value) {
            $container.append(key + ': ' + value + '<br />');
        });
        $container.append('<hr />');
    }
});

デモ

于 2013-03-11T14:53:50.337 に答える