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

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

新規登録して質問してみよう
ただいま回答率
85.50%
JSONP

JSONP(JSON with padding)は、JSONを使用した関数呼び出しのための仕組み。クロスドメインでのデータの受け渡しが可能です。JavaScriptからクロスドメインで容易にデータを扱うことができます。

JSON

JSON(JavaScript Object Notation)は軽量なデータ記述言語の1つである。構文はJavaScriptをベースとしていますが、JavaScriptに限定されたものではなく、様々なソフトウェアやプログラミング言語間におけるデータの受け渡しが行えるように設計されています。

jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

Ajax

Ajaxとは、Webブラウザ内で搭載されているJavaScriptのHTTP通信機能を使って非同期通信を利用し、インターフェイスの構築などを行う技術の総称です。XMLドキュメントを指定したURLから読み込み、画面描画やユーザの操作などと並行してサーバと非同期に通信するWebアプリケーションを実現することができます。

Q&A

解決済

2回答

2855閲覧

jQuery・ajaxで複数のjsonを非同期で取得する場合に中身が入れ替わる

退会済みユーザー

退会済みユーザー

総合スコア0

JSONP

JSONP(JSON with padding)は、JSONを使用した関数呼び出しのための仕組み。クロスドメインでのデータの受け渡しが可能です。JavaScriptからクロスドメインで容易にデータを扱うことができます。

JSON

JSON(JavaScript Object Notation)は軽量なデータ記述言語の1つである。構文はJavaScriptをベースとしていますが、JavaScriptに限定されたものではなく、様々なソフトウェアやプログラミング言語間におけるデータの受け渡しが行えるように設計されています。

jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

Ajax

Ajaxとは、Webブラウザ内で搭載されているJavaScriptのHTTP通信機能を使って非同期通信を利用し、インターフェイスの構築などを行う技術の総称です。XMLドキュメントを指定したURLから読み込み、画面描画やユーザの操作などと並行してサーバと非同期に通信するWebアプリケーションを実現することができます。

0グッド

1クリップ

投稿2019/08/23 08:16

複数のjsonファイルからjsonpで中身を読みだし、対応するhtml側のDOMに表示するjsをjQueryの.ajaxを使って書いています。
下記の様なコードで実行した場合、それぞれのDOMに想定していないjsonの中身が表示されてしまいます。

※.AAAにBBB.jsonの中身、.bbbにccc.jsonの中身等、ランダムに変わります。

// 呼び出すjson AAA.json BBB.json CCC.json
// js function jsonSet(itemName) { $.ajax({ type: 'get', url: itemName + '.json', dataType: 'jsonp' }) .done(function(responseData){   /*jsonの内容を同じclassを付与しているHTMLのDOMに追加する*/ $('.' + itemName).prepend(responseData); } } var arr = ['AAA','BBB','CCC'] arr.forEach (function(e, i){ jsonSet(e); });

ajaxの非同期通信が原因かと思い調べた結果、下記の様にループをforで廻して添字を渡す書き方も試したのですが、同様の結果となりました。

// js 関数呼び出し部分のみ var arr = ['AAA','BBB','CCC'] for(var i = 0, len = arr.length; i < len; i++){ var count = i; (function(i){ jsonSet(arr[i]) })(count); }

原因が分かりましたら教えて頂ければと思います。
宜しくお願いいたします。

気になる質問をクリップする

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

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

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

Lhankor_Mhy

2019/08/23 09:48

試してみましたが、再現しないですね…… そのサーバ側のレスポンスヘッダ、 content-type: application/javascript; charset=utf-8 になっているのですよね?
退会済みユーザー

退会済みユーザー

2019/08/23 10:43

ご回答ありがとうございます。 レスポンスヘッダはcontent-type: application/javascript; charset=utf-8 となっています。 上記のコードは簡略化しておりますが、実際は10ファイル程のjsonを非同期で読み込み成形してDOMに表示しており、想定外の位置にDOMが出力されます。 平行処理にミスがあるのかと考え下記等を参考にしたのですが、実現できておりません。 https://goma.pw/article/2015-03-14-1/
guest

回答2

0

ベストアンサー

根本的には解決できなかったのですが、今回は取ってきているjsonの中身から該当するDOMを判別して振り分ける処理で対応いたしました。
ご回答いただき誠にありがとうございました。

投稿2019/08/24 11:34

退会済みユーザー

退会済みユーザー

総合スコア0

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

0

複数のjsonファイルからjsonpで中身を読みだし

ちょっと何をしたいのかわからないです。
jsonpで読むにはコールバックに囲まれた形でファイルが値を返してこないといけませんが?

jsonp

javascript

1$(function(){ 2 $.ajax({ 3 url:"AAA.json", 4 dataType:"jsonp", 5 jsonpCallback: 'mycallbackFunc', 6 }).done(function(data){ 7 console.log(data); 8 }); 9});
  • AAA.json

jsonp

1mycallbackFunc({"count":3,"list":[{"id":"00000","name":"hogehoge","age":"18"},{"id":"00001","name":"hogehogehoge","age":"19"},{"id":"00002","name":"hogehogehoge","age":"20"}]})

投稿2019/08/23 08:26

編集2019/08/23 09:26
yambejp

総合スコア114572

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

退会済みユーザー

退会済みユーザー

2019/08/23 08:49

情報不足で申し訳ありません。 jsonファイルについては、別のサーバ―上のjsonファイルをjsonpで取得する運用となります。 コールバックに囲まれた内容が返るので中身の読み込み自体でできるのですが、DOMに表示させる時に想定した形で取り出せない、との意味でご相談いたしました。
yambejp

2019/08/23 08:59

AAA.jsonの中身を例示してください 拡張子jsonでjsonpのデータを保持するというのもちょっと運用方法がいまいちだと思います
退会済みユーザー

退会済みユーザー

2019/08/23 09:07

AAA.jsonファイルの中身は下記の様なイメージです。 BBB.json、CCC.jsonも項目等は同じものとなります。 ``` { "count": 3, "list": [ { "id": "00000", "name": "hogehoge", "age": "18" }, { "id": "00001", "name": "hogehogehoge", "age": "19" }, { "id": "00002", "name": "hogehogehoge", "age": "20" } ] } ```
yambejp

2019/08/23 09:27 編集

例示のjsonはまさにただのjsonであって、コールバックに囲まれていませんが? mycallbackFunc({"count":3,"list":[{"id":"00000","name":"hogehoge","age":"18"},{"id":"00001","name":"hogehogehoge","age":"19"},{"id":"00002","name":"hogehogehoge","age":"20"}]}) 的なデータを返してこないとjsonpでは読めません (別途ご自身でmycallbackFuncも設定しておく) jsonpの処理の仕方を追記しておきました
退会済みユーザー

退会済みユーザー

2019/08/23 09:35

callback部分を書きわすれてしまい申し訳ありません。 実際は下記の内容となります。 jsonpCallbackは.ajaxの基準値のままと想定していたので上記のコードでは設定しておりませんでした。 ``` callback({ "count": 3, "list": [ { "id": "00000", "name": "hogehoge", "age": "18" }, { "id": "00001", "name": "hogehogehoge", "age": "19" }, { "id": "00002", "name": "hogehogehoge", "age": "20" } ] }) ```
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問