Question

我需要一些JSON帮助，因为我不熟悉完成任务的最佳方法：

这是我通过URL获取的json：

[

{"ID":1,"ProgramID":100,"Name":"Class 1","Cost":100},
{"ID":2,"ProgramID":100,"Name":"Class 2","Cost":200},
{"ID":3,"ProgramID":100,"Name":"Class 3","Cost":150},
{"ID":4,"ProgramID":100,"Name":"Class 4","Cost":125},
{"ID":5,"ProgramID":100,"Name":"Class 5","Cost":50},
{"ID":6,"ProgramID":100,"Name":"Class 6","Cost":75},
{"ID":7,"ProgramID":100,"Name":"Class 7","Cost":100},

{"ID":8,"ProgramID":101,"Name":"Class 1","Cost":110},
{"ID":9,"ProgramID":101,"Name":"Class 2","Cost":205},
{"ID":10,"ProgramID":101,"Name":"Class 3","Cost":115},
{"ID":11,"ProgramID":101,"Name":"Class 4","Cost":150},
{"ID":12,"ProgramID":101,"Name":"Class 5","Cost":160},
{"ID":13,"ProgramID":101,"Name":"Class 6","Cost":180},
{"ID":14,"ProgramID":101,"Name":"Class 7","Cost":190}

]

我需要帮助创建一个基于ProgramID在循环中获取数据的函数。

我试图在循环中输出HTML：

<div class="row">
  <div class="col-xs-6">
    Class 1
  </div>
  <div class="col-xs-6">
    $100.00
  </div>
</div>
<div class="row">
  <div class="col-xs-6">
    Class 2
  </div>
  <div class="col-xs-6">
    $200.00
  </div>
</div>

等...

function getData(programid) {
  $.getJSON("URL", { ProgramID: +programid}, function(data) {
      $.each(data, function(key, value){
         ??
      });
  });
}

Answer 1

我不确定您的getData功能是否有效，但这里有一个片段，它会提取您提供的数据并仅提取ProgramID 101以将其放入div中：

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script>
var data = [

{"ID":1,"ProgramID":100,"Name":"Class 1","Cost":100},
{"ID":2,"ProgramID":100,"Name":"Class 2","Cost":200},
{"ID":3,"ProgramID":100,"Name":"Class 3","Cost":150},
{"ID":4,"ProgramID":100,"Name":"Class 4","Cost":125},
{"ID":5,"ProgramID":100,"Name":"Class 5","Cost":50},
{"ID":6,"ProgramID":100,"Name":"Class 6","Cost":75},
{"ID":7,"ProgramID":100,"Name":"Class 7","Cost":100},

{"ID":8,"ProgramID":101,"Name":"Class 1","Cost":110},
{"ID":9,"ProgramID":101,"Name":"Class 2","Cost":205},
{"ID":10,"ProgramID":101,"Name":"Class 3","Cost":115},
{"ID":11,"ProgramID":101,"Name":"Class 4","Cost":150},
{"ID":12,"ProgramID":101,"Name":"Class 5","Cost":160},
{"ID":13,"ProgramID":101,"Name":"Class 6","Cost":180},
{"ID":14,"ProgramID":101,"Name":"Class 7","Cost":190}

];

function getRow(pID) {
  var myD = [];
  
  // Extract data from global variable
  for (var i = 0; i < data.length; i++) {
    if (data[i].ProgramID == pID) {
      myD.push(data[i]);
    }
  }
  
  // Container for created rows
  var $result = $('<div />');

	// Iterate extracted data
  for (var i = 0; i < myD.length; i++) {
  	// Create new row
    var $row = $('<div class="row"></div>');
    
    // Column 1
    var $col1 = $('<div class="col-xs-6" />');
    $col1.text(myD[i].Name);
    
    // Column 2
    var $col2 = $('<div class="col-xs-6" />');
    $col2.text(myD[i].Cost);
    
    // Append columns
    $row.append($col1);
    $row.append($col2);
    
    // Append row
    $result.append($row);
  }
  
  // Dummy for output
  $('#output').append($result);

  return $result;
}
</script>
<input type="button" onclick="getRow(101);" value="click"></input>
<div id="output">

</div>

＆＃13;

更新：您的评论表明您已经请求过滤了数据源。所以你的功能可能如下所示：

function getData(programid) {
  $.getJSON("URL", { ProgramID: programid}, function(data) {
      $.each(data, function(key, value){
         if (data != null) {
         for (var i = 0; i < data.length; i++) {
            // Create new row
             var $row = $('<div class="row"></div>');

             // Column 1
             var $col1 = $('<div class="col-xs-6" />');
             $col1.text(data[i].Name);

             // Column 2
             var $col2 = $('<div class="col-xs-6" />');
             $col2.text(data[i].Cost);

             // Append columns
             $row.append($col1);
             $row.append($col2);

             // Append row
             $result.append($row);
           }

           // Dummy for output
           $('#output').append($result);
         }
      });
  });
}

$ .getJSON输出带有值循环的对象的html

1 个答案: