Quantcast
Channel: みっちぇのWebデザイン研究所
Viewing all articles
Browse latest Browse all 31

jQueryでjsonデータをAjax通信で取得し表示

$
0
0

お久しぶりです。
実はいよいよプログラマーになりまして、主婦から抜け出し、会社員として働いています。
業務でAjaxを使用しており、jsonデータを加工してDOMを生成し表示していたのですが、幾分forループがネストされていて解読に時間がかかったので、コードをいい感じにリファクタリングできないかと試してみたものです。

jQueryjsonデータをAjax通信で取得し表示する

以下クリックで表示されます。

stackblitz.com

コードの説明

  1. 取得ボタンクリックでjsonファイルをGETしにいく
  2. 取得したデータはオブジェクトに変換
  3. $.eachでデータをテーブルに順番に入れ込む

まとめ

意外と簡単に回せることがわかった。
for文でネストするよりこちらのほうが見やすさは格段に上だと思う。
なぜforでネストしてるんだろうか。。。
何か理由があるのかもしれない。


Viewing all articles
Browse latest Browse all 31

Trending Articles