javascript jsonの配列を表示したい

Question

お世話になります。
あるjsonファイルの多次元配列をjavascriptやjqueryなどでテーブルの用な感じで表示、検索したいのですがなにかいい方法はありますでしょうか？
色々と探しているのですがうまく動くものがなく困っています。
多次元配列の階層が８層ぐらいあるのでどうしたら良いのでしょうか？

宜しくお願い致します。

Answer 1

　munyaXさんの回答を見て、イメージされているのはこんな感じのものなのかな、と思いました。

var json = [
{"年":"1992", "国":"スペイン（Spain）", "都市":"バルセロナ（Barcelona）"},
{"年":"1996", "国":"アメリカ合衆国（United States）", "都市":"アトランタ（Atlanta）"},
{"年":"2000", "国":"オーストラリア（ Australia）", "都市":"シドニー（Sydney）"},
{"年":"2004", "国":"ギリシャ（Greece）", "都市":"アテネ（Athens）"},
{"年":"2008", "国":"中国（China）", "都市":"北京（Beijing）"},
{"年":"2012", "国":"イギリス（United Kingdom）", "都市":"ロンドン（London）"},
{"年":"2016", "国":"ブラジル（Brazil）", "都市":"リオデジャネイロ（Rio de Janeiro）"},
{"年":"2020", "国":"日本（Japan）", "都市":"東京（Tokyo）"}
];


document.body.appendChild(
  (function(k, table){
    
    table.appendChild(k.reduce(function(pV, cV, i, self){
      return pV.appendChild(
        document.createElement('th').appendChild(
          document.createTextNode(cV)
        ).parentNode
      ).parentNode;
    }, document.createElement('tr')));
    
    json.forEach(function(v, i, self){
      table.appendChild(k.reduce(function(pV, cV, i, self){
        return pV.appendChild(
          document.createElement('td').appendChild(
            document.createTextNode(v[cV])
          ).parentNode
        ).parentNode;
      }, document.createElement('tr')));
    })
    
    return table;
  })(
    json.reduce(function(pV, cV, i, self){
      return pV.concat( Object.keys( cV ) )
    },[])
    .filter(function (v, i, self) {
                return self.indexOf(v) === i;
    }),
    document.createElement('table')
  )
);

　ただ、これが「８層」あるとなると、8次元空間にしか展開できないと思いますので、見やすく表示するというのは無理かなあ、と。

Comments

[shinoda]

お世話になっております。
返信が遅くなってしまい申し訳ありません

ご回答されたように8次元だとなかなか見やすく表示というのは難しそうですね。
いま現在使っている一覧表示が無難な選択なのかなと思いました。

ご回答有難うございました

Answer 2

jsdo.it で こんなサンプルをみつけました。

• JSONを可視化するやーつ http://jsdo.it/shirayuki/eqpd

jquery のプラグインも見つけました。

• http://webkaru.net/jquery-plugin/columns/

...
このプラグインを使えば、script内に記述したJSONデータや外部JSONファイルからHTMLのテーブルを作成することができます。
しかも！作成したテーブルにはソート、検索、ページャーの機能が付いており、至れり尽くせりのプラグインです。
...

Comments

[shinoda]

返信が遅くなって申し訳ございません

ご回答された件ですが他で投稿していますが現在私が使っているものと同じだったのでやはりこの方法が最善なのかと思いました。
ご回答有難うございました。

Answer 3

例えば以下のようなJSONがあったら

var json = {
   [1, 2, ['a', 'b', 'c']]
};

以下のようなHTMLを吐く感じでしょうか？

<table>
<tr>
  <td>1</td>
  <td>2</td>
  <td>
     <table>
     <tr>
        <td>a</td>
        <td>b</td>
        <td>c</td>
     </tr>
     </table>
  </td>
</tr>
</table>

この理解で正しい場合、確かにjQueryのプラグインでは見かけたことないですね。
（私も知らないだけで探せばあるのかもしれませんが）

ただ自分で書いてもそこまで難しいコードにはならないと思いますよ。
以下、擬似コードですが、

json2table({
  [1, 2, ['a', 'b', 'c']]
});

function json2table(json){
  "<table>"を表示
  for(var tr in json){
    "<tr>"を表示
    for(var i=0; i<tr.length; i++){
      "<td>"を表示
      if( tr[i] が 配列(オブジェクト)であれば ){
        json2table(tr[i]);  //再帰
      }
      else{
        tr[i]を表示
      }
      "</td>"を表示
    }
    "</tr>"を表示
  }
  "</table>"を表示
}

な感じで再帰使ってやれば良いかなと。

Comments

[shinoda]

早速のご回答ありがとうございます。
jsonの中身は以下の様な感じです

*************************************
{
"aaa":
{
"bbb":[
{
"no":"111",
"name":"zzz",
"types":[
{"name":"フリー","type":"free"}
]
]
}
}

*************************************

ご提示されたコードはこれから試してみたいと思います
再帰というのは深さということですか？
配列があればどんどん下の階層に下がっていくというような認識であってますでしょうか？
phpで言うところのforeachをネストしていくような感じですかね？

上記のコードですと検索とかはできますでしょうか？
[aaa][bbb][0]
[aaa][bbb][1]
と合ったら数字のところを変数にして検索のような感じにしたいのです。
よろしくお願いします。

[munyaX]

>jsonの中身は以下の様な感じです
あとはこれをどういったHTMLにしたいかを明示されると回答がつきやすいと思いますよ。インプットと、最終的なアウトプットの両方があると他の方もイメージしやすいのではないかと。

> 再帰というのは深さということですか？
再帰は簡単に言うと関数内で自分自身を呼び出すことです。詳しくはググッていただければ色々と読み物が出てくると思います。一度マスターすると面白いですよ。

> 上記のコードですと検索とかはできますでしょうか？
> [aaa][bbb][0]
> [aaa][bbb][1]
> と合ったら数字のところを変数にして検索のような感じにしたいのです。
よくわかんないですｗ
もう少し説明をお願いできますか？(；´∀｀)

[shinoda]

お世話になっております

配列の表示についてですがシンプルなテーブルで左側にキーを表示して（th）右側に要素（td）を表示できればいいかなと思っています。

再帰に関してはこれから調べて勉強したいと思います.

検索の件なのですが先程書いたJSONの配列の
[aaa][bbb][0]
[aaa][bbb][1]
[aaa][bbb][2]
・・・以下ループ

といった感じで最後の数字の部分がキーになっていてその下の階層のキーと要素を検索して表示したいと考えております。
私の知識が乏しく質問も回答もうまくできてないと思いますがよろしくお願いします。

[munyaX]

> 配列の表示についてですがシンプルなテーブルで左側にキーを表示して（th）右側に要素（td）を表示できればいいかなと思っています。
手間を惜しまずHTMLのタグを書かれると話が早いと思いますｗ
入れ子になったらどうなるのかが現時点だと謎です。

> 最後の数字の部分がキーになっていてその下の階層のキーと要素を検索して表示したい
なるほど、わからんｗ
キーというのは配列の添字になっている0 , 1, 2 のことをさしていますか？
その下の階層のキーというのは、
　0の時は [aaa][bbb][1]
　1の時は [aaa][bbb][2]
をさしていますか？

JSONをtableで、という話は理解できるのですが、
後半登場したこのプログラムが何をしたいのか目的が謎で処理をイメージすることができないです。

[shinoda]

お世話になっております
htmlの部分に関しては正直あまり考えておりませんでした。
多次元じゃなければjqueryで表示できるものがあったので同じように単純に二列のテーブルにできるのが理想です。（左側にキー、右側に要素）

検索の部分なんですが
0の時は[aaa][bbb][0]
1の時は [aaa][bbb][1]
と言った感じです

数字の部分を前のページからフォームで渡して$iに格納したいと考えております。
全体のイメージとしてはjsonファイルの配列を一覧表示と検索して1件だけ表示したいというイメージです。
よろしくお願いします。

[munyaX]

> 同じように単純に二列のテーブルにできるのが理想です。（左側にキー、右側に要素）
繰返しになりますが、入れ子の時はどうなるのですか？
元になるデータと、最終的なHTMLを提示されないのはなぜでしょうか？？
（HTMLがわからないのであればEXCELか何かで表つくってキャプチャを上げるとかでいけるかなと思います）

> 検索の部分なんですが
> (snip)
> 全体のイメージとしてはjsonファイルの配列を一覧表示と検索して1件だけ
> 表示したいというイメージです。

つまり、レコードを一意に特定して表示させたいということですか？
これはご自身で言われている通り、
data[aaa][bbb][i]
とすればできますが…。

※以下のデータを想定
var i = 0;
var data = {
'aaa':{
'bbb':[
{"no":"111","name":"aaa","types":[{"name":"フリー","type":"free"}]}
, {"no":"222","name":"bbb","types":[{"name":"フリー","type":"free"}]}
, {"no":"333","name":"ccc","types":[{"name":"フリー","type":"free"}]}
]
}
}

[shinoda]

お世話になっております。
確かに入れ子の部分が困っています。
今現在は下記のような感じで表示しているのですがすごく縦長になってしまい一覧表示すると見づらいので
http://marianoguerra.github.io/json.human.js/
私の理想は下記のようなjqueryで多次元配列に対応していればいいのですが見つからなく質問させて頂いた次第です。
******************************
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="description" content="Columns のデモでーす。">
<title>Columns - jQueryプラグイン</title>
<link id="style" href="css/classic.css" rel="stylesheet" media="screen">
</head>
<body>
<h1>Columns のデモでーす。</h1>
<div id="columns"></div>

<script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
<script src="js/jquery.columns.min.js"></script>
<script>
$(document).ready(function() {
var json = [
{"年":"1992", "国":"スペイン（Spain）", "都市":"バルセロナ（Barcelona）"},
{"年":"1996", "国":"アメリカ合衆国（United States）", "都市":"アトランタ（Atlanta）"},
{"年":"2000", "国":"オーストラリア（ Australia）", "都市":"シドニー（Sydney）"},
{"年":"2004", "国":"ギリシャ（Greece）", "都市":"アテネ（Athens）"},
{"年":"2008", "国":"中国（China）", "都市":"北京（Beijing）"},
{"年":"2012", "国":"イギリス（United Kingdom）", "都市":"ロンドン（London）"},
{"年":"2016", "国":"ブラジル（Brazil）", "都市":"リオデジャネイロ（Rio de Janeiro）"},
{"年":"2020", "国":"日本（Japan）", "都市":"東京（Tokyo）"}
];
$('#columns').columns({
data:json
});
});
</script>
</body>
</html>

******************************

ご提示された検索の部分ですがmunyaX様の仰るとおりで実装できそうです
var i = 0;
の’0’の部分を変数にして個別に呼び出すということですよね？
いかんせんjavascriptが全くの無知なものでjsonファイルを呼び出すコードさえわからないのでいま勉強しているところでございます。
ひと通り調べてまた質問させていただきます。
よろしくお願いします。

[munyaX]

そうですね、一度要件を整理されてから再度ご質問された方が良いかもしれません(^^;

・目的
・入力されるデータの仕様とサンプル
・最終的に出力したい結果

を明確にされると良いと思います。
明確になった時点で自己解決する場合も多いですので、あわてず作業をされると良いと思います。