質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

ただいまの
回答率

90.48%

  • JavaScript

    16957questions

    JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

javascript jsonの配列を表示したい

解決済

回答 3

投稿

  • 評価
  • クリップ 0
  • VIEW 4,511

shinoda

score 82

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

宜しくお願い致します。
  • 気になる質問をクリップする

    クリップした質問は、後からいつでもマイページで確認できます。

    またクリップした質問に回答があった際、通知やメールを受け取ることができます。

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

回答 3

checkベストアンサー

0

例えば以下のような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>"を表示
}

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

投稿

編集

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2015/02/09 12:41

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

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

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

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

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

    キャンセル

  • 2015/02/09 12:46

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

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

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

    キャンセル

  • 2015/02/09 13:50

    お世話になっております

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

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

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

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

    キャンセル

  • 2015/02/09 14:04

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

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

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

    キャンセル

  • 2015/02/09 14:27

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

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

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

    キャンセル

  • 2015/02/09 20:36

    > 同じように単純に二列のテーブルにできるのが理想です。(左側にキー、右側に要素)
    繰返しになりますが、入れ子の時はどうなるのですか?
    元になるデータと、最終的な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"}]}
    ]
    }
    }

    キャンセル

  • 2015/02/09 21:05

    お世話になっております。
    確かに入れ子の部分が困っています。
    今現在は下記のような感じで表示しているのですがすごく縦長になってしまい一覧表示すると見づらいので
    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ファイルを呼び出すコードさえわからないのでいま勉強しているところでございます。
    ひと通り調べてまた質問させていただきます。
    よろしくお願いします。

    キャンセル

  • 2015/02/10 20:44

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

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

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

    キャンセル

0

jsdo.it で こんなサンプルをみつけました。
- JSONを可視化するやーつ http://jsdo.it/shirayuki/eqpd

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

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2015/02/12 12:48

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

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

    キャンセル

0

 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層」あるとなると、8次元空間にしか展開できないと思いますので、見やすく表示するというのは無理かなあ、と。

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2015/02/12 12:50

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

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

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

    キャンセル

15分調べてもわからないことは、teratailで質問しよう!

  • ただいまの回答率 90.48%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる

関連した質問

同じタグがついた質問を見る

  • JavaScript

    16957questions

    JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。