2017-01-30 10 views
0

サーバーからjsonオブジェクトの応答を取得していますが、データを列に表示できません。 あなたのお手伝いをよろしくお願いします。データ型の列にデータを取り込みます

JSON OBJECT RESPONSE: 
{ 
"CHD2": { 
"POSName": "CHANDIGARH INDU. AREA-I", 
"HODB": "QSR_PHASE-I_CHANDIGARH" 
}, 
"D002": { 
"POSName": "DEHRADUN-ASTLEY HALL", 
"HODB": "QSR_DEHRADUN_ASTLEY" 
}, 
"J002": { 
"POSName": "VAISHALI NAGAR", 
"HODB": "QSR_VAISHALI_NAGAR" 
} 
} 

jQueryのSCRIPT

<script> 
    $(document).ready(function() { 
    console.log('Initializing tables...'); 
    var <a href="//legacy.datatables.net/ref#aaData">aaData</a> = []; 
     $('#dataTables-example').DataTable({ 
      responsive: true, 
      processing: true, 
      serverSide: true, 
      data : aaData, 
      ajax: { 
       url:'http://localhost:81/reporting/outletList.php', 
       type:'POST', 
       dataType:'json', 
       dataSrc : "", 
       error: function(errorThrown){ 
        alert(errorThrown); 
        alert("There is an error with AJAX!"); 
       }, 
      "success": function(data) { 
           console.log(data); 
       aaData.push([ 
         data['CHD2'].POSName, 
         data['CHD2'].HODB 
        ]); 
       aaData.push([ 
        data['D002'].POSName, 
        data['D002'].HODB 
       ]); 
       data = aaData; 
       console.log(data); 
      }}, 
      /*columns: [ 
       { data: "POSName"}, 
       { data: "HODB"} 
      ],*/ 
      "language": { 
      "zeroRecords": "No records to display" 
      } 
      }) 
     }); 
    </script> 



<div class="panel-body"> 
    <table width="100%" class="table table-striped table-bordered table-hover" id="dataTables-example"> 
    <thead> 
    <tr> 
    <th>POSName</th> 
    <th>HODB</th> 
    </tr> 
    </thead> 

まだそれは働いていません。 JSONオブジェクトレスポンスはChromeのデベロッパーツールにありますが、データは表に取り込まれません。このような

+0

あなたのコードは非常に複雑です。簡単な方法で処理できます....また、あなたのjsonレスポンスを更新するHTMLまたはDIVまたはSPANクラス名を書いてください –

+0

あなたがしたい場所が不明ですデータを表示(レンダリング)します。あなたは、(取得されたデータを使用して)javascriptで新しいHTMLテーブルマークアップを作成し、ページのどこかに追加することができます。 – misher

+0

こんにちは、私はデータのレンダリングのためのHTMLコードを追加しました。データテーブルidは#dataTables-exampleです。 – user3711100

答えて

0

何か作業をする必要があります:

let data = { 
    "CHD2": { 
     "POSName": "CHANDIGARH INDU. AREA-I", 
     "HODB": "QSR_PHASE-I_CHANDIGARH" 
    }, 
    "D002": { 
     "POSName": "DEHRADUN-ASTLEY HALL", 
     "HODB": "QSR_DEHRADUN_ASTLEY" 
    }, 
    "J002": { 
     "POSName": "VAISHALI NAGAR", 
     "HODB": "QSR_VAISHALI_NAGAR" 
    } 
    }, 
    dataArray = []; 

for (let item in data) { 
    let row = { 
    "Name": item 
    }; 
    for (let element in data[item]) { 
    console.log(data[item][element]); 
    row[element] = data[item][element]; 
    } 
    dataArray.push(row); 
} 
console.log(dataArray); 

をそれはあなたのデータを表している必要がありますrowsを行っていたら。働くJSFiddle here

+0

こんにちは、あなたの復帰をありがとう。 3つのフィールドを持つdataArrayを取得していますが、テーブルにデータが入力されていません。その「処理」を示しています。あなたは何か問題のために私のHTMLコードをチェックしてください。 – user3711100

関連する問題