javascpirtを使用してjsonからテーブルを作成する

Question

まず最初に、私はかなりJavaScriptに新しいです。私はjsonファイルからテーブルを作成しようとしました。私はいくつかの情報を読み、いくつかのチュートリアルに従いました。そして、ついに、Webブラウザに表示されるテーブルを作成することができました。しかし、私は、さまざまな配列が常にソートされ、一意の値しか許されないことを知りました。ここでは例えば、JSONです：

var json = { 
      "data": [ 
       { 
        "number": "13", 
        "position": "GK", 
        "name": "John" 
       }, 
       { 
        "number": "2", 
        "position": "CB", 
        "name": "Bill" 
       }, 
       { 
        "number": "26", 
        "position": "CB", 
        "name": "Nick" 
       } 

そして、私は、テーブル内の情報を入れたとき、私はそれがこのようなものになります作成しています：

| Number | Position | Name | 
| 2 | GK | John | 
| 13 | CB | Bill | 
| 26 |undefined | Nick | 

JSONファイルはありませんから、あなたが数字を見ることができるように名前が一致せず、番号がソートされます。たとえば、Johnは数字2ではなく数字13です。もう1つは同じ値を許さないということです - 2つのCBポジションがありますが、それは1だけを表示し、もう1つはundefinedと表示されます。

 JSONDataLouder = { 
    getPlayers: function(json) { 
     var object = { 
     "number": {} 
     , "position": {} 
     , "name": {} 
    }; 

    var personData = null; 
    for (var i = 0; i < json.data.length; i++) { 
     personData = json.data[i]; 
     object.number[personData.number] = 1; 
     object.position[personData.position] = 1; 
     object.name[personData.name] = 1; 
    } 

    var u = { 
     "number": [] 
     , "position": [] 
     , "name": [] 
    }; 

    for(var k in object.number) u.number.push(k); 
    for(var k in object.position) u.position.push(k); 
    for(var k in object.name) u.name.push(k); 


    return u; 

} 

,getTable: function(json) { 

    var obj = this.getPlayers(json); 

    var number = obj.number; 
    var position = obj.position; 
    var name = obj.name; 

    var table = this.createTable(); 


    var headerRow = table.insertRow(); 
    headerRow.insertCell().innerHTML = "Number"; 
    headerRow.insertCell().innerHTML = "Position"; 
    headerRow.insertCell().innerHTML = "Name" 


    for (var i = 0; i < number.length; i++) { 
     var secondRow = table.insertRow(); 
     secondRow.style.textAlign="center"; 
     secondRow.insertCell().innerHTML = number[i]; 
     secondRow.insertCell().innerHTML = position[i]; 
     secondRow.insertCell().innerHTML = name[i]; 

    } 

    return table; 
} 


,render: function(mainDiv) { 

    $(mainDiv).empty(); 
    var json = { 
     "data": [ 
      { 
       "number": "13", 
       "position": "GK", 
       "name": "John" 
      }, 
      { 
       "number": "2", 
       "position": "CB", 
       "name": "Bill" 
      }, 
      { 
       "number": "26", 
       "position": "CB", 
       "name": "Nick" 
      } 

私は配列にオブジェクトをプッシュについて学ぶとき、私は何かを誤解し、私はどのような方法でそれを変更しようとしたが、それはまだ同じをappeares知っている：ここで

は、私がこれまでに書いたものです。あなたの時間のために事前にありがとうございます。

Answer 1

は、私はあなたが経験している問題は、JavaScriptでは、ハッシュが発注されていないことだと思うので、あなたがfor(var k in object.number)を行うとき、あなたはそれを置くのと同じ順序で出てくる各番号を期待することはできません。

配列は、しかし、順序を保持します。

object変数はまったく必要ありません。私はあなただけでこれを行うことができると思います。

JSONDataLouder = { 
    getPlayers: function(json) { 

    var u = { 
    "number": [], 
    "position": [], 
    "name": [] 
    }; 

    var personData; 
    for (var i = 0; i < json.data.length; i++) { 
    personData = json.data[i]; 
    u.number.push(personData.number); 
    u.position.push(personData.position); 
    u.name.push(personData.name); 
    } 

    return u; 
} 

Answer 2

おそらくこれはあなた

var json = { 
 
     "data": [ 
 
     { 
 
      "number": "13", 
 
      "position": "GK", 
 
      "name": "John" 
 
     }, 
 
     { 
 
      "number": "2", 
 
      "position": "CB", 
 
      "name": "Bill" 
 
     }, 
 
     { 
 
      "number": "26", 
 
      "position": "CB", 
 
      "name": "Nick" 
 
     }] 
 
     }; 
 
     
 
     console.log('| Número | Posición | Nombre |'); 
 

 
     $.each(json.data, function(id, item) 
 
     { 
 
      
 
      console.log(item.number + '|' + item.position + '|' + item.name + '|'); 
 
     
 
     });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

Answer 3

異なるテストデータはあなたにも、スゴ結果を与えたいと考えて助けることができます。実際にはコードには多くの問題がありますが、私はあなたを追い払うことがデータ構造を混在させることになると思います。テーブル自体について考える前に、あなたの中間的なデータ構造、つまりある種の（効果的な）2次元配列について考えてみてください。

中間の構造は必要ありません。既にJSON.dataに配列があります。あなたのコードでは、この配列を別のものに変換しています。

あなたがやっていることのいくつかが省略されているが、テーブル生成の中核になっています。

var json = { 
    "data": [ 
     { 
      "number": "13", 
      "position": "GK", 
      "name": "John" 
     }, 
     { 
      "number": "2", 
      "position": "CB", 
      "name": "Bill" 
     }, 
     { 
      "number": "26", 
      "position": "CB", 
      "name": "Nick" 
     } 
    ] 
}; 


function objToTable(obj) { 
    var data = obj.data; 
    var output = '<table>'; 
    for (var i = 0; i < data.length; i++) { 
     output += '<tr>'; 
     output += '<td>' + data[i].number + '</td>'; 
     output += '<td>' + data[i].position + '</td>'; 
     output += '<td>' + data[i].name + '</td>'; 
     output += '</tr>\n'; // added newline for console readability 
    } 
    output += '</table>'; 
    return output; 
} 


console.log(objToTable(json));