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

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

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

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

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

Q&A

解決済

4回答

5160閲覧

jQueryでのJSONのテーブル表示ができません

nnns

総合スコア10

JavaScript

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

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

0グッド

0クリップ

投稿2018/07/26 13:44

編集2018/07/28 21:38

フリー音源を制作してインターネット上でダウンロード出来る様にするために、インターネット上のヒントを元にして下記の様なJSONPを使うソースにしたのですが、上手く動作しません。
本当は「画像→曲名→音声の操作→歌詞、コメントなどのテキストファイルリンク」の順番で曲ごとに並ぶはずですが、下記の画像の様に表示されません。
正常な表示として、YouTubeの検索結果のページをイメージして頂ければいいと思います。
フリーレンタルサーバを使うので、別のドメインからデータを取得する必要があるので、JSONPを使おうと思いました。
よろしくお願いいたします。

![イメージ説明

HTML

1<!DOCTYPE html> 2 <head> 3 <meta charset="UTF-8"> 4 <script src="js/jquery-3.1.0.min.js"></script> 5 <script> 6$(function() { 7 $.ajax({ 8 url: http://xxxx.com/xxxxx/xxxx, 9 type:'GET', 10 dataType: 'jsonp', 11 }).done(function(data) { 12 var count = 0 ; 13 $(data.data).each (function() { 14 $("#data_list").append("<tr id=\"data_id" + count + "\"></tr><br>") ; 15 $("#data_id" + count).append("<td><img src=" + this.picURL + " width=100 height=100></td><br><br>") ; 16 $("#data_list #data_id" + count).append("<td><center>" + this.title + "</center></td><br><br>") ; 17 $("#data_list #data_id" + count).append("<td><audio src=" + this.mp3url + " controls></audio></td><br><br>") ; 18 $("#data_list #data_id" + count).append("<td><center><a href=" + this.kURL + ">歌詞</a></center></td>") ; 19 count++ ; 20 }); 21 }); 22}); 23 </script> 24 <title>TITLE</title> 25 </head> 26 <body> 27 <center> 28 <table> 29 <thead> 30 <tr> 31 <th width="100">画像</th> 32 <th width="400">曲名</th> 33 <th width="300">再生</th> 34 <th width="300">歌詞</th> 35 </tr> 36 </thead> 37 <tbody id="data_list"> 38 </tbody> 39 </table> 40 </center> 41 </body> 42</html>

JSON

1{ 2 "data": [ 3 { 4 "kURL": "http://xxxx.com/xxxxx/xxxx.txt", 5 "title": "TEST", 6 "mp3url": "http://xxxx.com/xxxxx/xxxx.mp3", 7 "picURL": "http://xxxx.com/xxxxx/xxxx.jpg" 8 } 9 ] 10}

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

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

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

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

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

m.ts10806

2018/07/26 23:17

「うまく動作しない」「うまくいかない」では何が起きているか伝わりません。「○○のようになるはずなのに××となってしまう」のような形で「ゴール」と「現象(エラーメッセージなども含む)」を明確にしてください。https://teratail.com/help/question-tips#questionTips3-4-1
nnns

2018/07/27 10:15

ありがとうございます。早速、修正させていただきます
m.ts10806

2018/07/27 11:11

ブラウザ開発ツールのコンソールにエラーが出ていないか確認してください。回答で指摘しましたが、JSONファイル内容がおかしい場合もエラーで正常に処理は行われません。
nnns

2018/07/27 12:57

わかりました。確認してみます
kei344

2018/07/28 16:55

jsonpはご自身で用意されるのでしょうか。それともサーバにjson形式のファイルを置いてあるのでしょうか。
nnns

2018/07/28 21:32

ご回答ありがとうございます。フリーのレンタルサーバの為、容量上の観点から別のドメインに置く必要があると思い、jsonpを使おうと思いました。完成するまでは、サーバにアップロードせずPC内のみで作業をする予定です。よろしくお願い致します。
guest

回答4

0

そもそもですが、そのJSONデータ、文法間違えてますよ。

JSON.parse: expected double-quoted property name at line 8 column 2 of the JSON data

"picURL": "http://xxxx.com/xxxxx/xxxx.jpg", ←この,は不要

投稿2018/07/26 23:23

m.ts10806

総合スコア80765

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

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

nnns

2018/07/27 10:26

とても参考になりました ありがとうございます。
m.ts10806

2018/07/27 11:14

いずれのコードもインデントがきちんとなっていないので整形サービスなど使って揃えてください。 インデントが汚いとそれだけで読む気をなくす回答者も少なくないです。 html文法的におかしいところもあります。trの後ろにbrがあったり。 原因が1つとは限らないので既に指摘したJSONファイルの文法もあわせて修正してください。
nnns

2018/07/27 14:27

分かりました。 もう一度、全体を見直して修正をしようと思います。
guest

0

データソースはJSON形式、dataType:'json'修正します。
試してみてください。

js

1 $.ajax({ 2 url: http://xxxx.com/xxxxx/xxxx, 3 type:'GET', 4 dataType: 'json', // json形式修正します。 5 }).done(function(data) { 6...

投稿2018/07/26 17:40

編集2018/07/26 17:43
ones

総合スコア85

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

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

nnns

2018/07/27 10:43

ご回答ありがとうございます。 試してみたのですが、修正前と状態は変わっていません。 また、「dataType:'json'」に修正した場合、JSONPは使用出来るのでしょうか? お手数をおかけしますが、よろしくお願いいたします。
guest

0

初めに記載したHTMLソースを少し分かりやすい様にしました。
また、歌詞の欄を削除しました。

HTML

1 2<!DOCTYPE html> 3 <head> 4 <meta charset="UTF-8"> 5 <script src="https://code.jquery.com/jquery-3.3.1.js"></script> 6 <script> 7$(function() { 8 var url = "lib.json"; 9 $.ajax({ 10 url: url, 11 type: 'GET', 12 dataType: 'json' 13 }).done(function(uke) { 14 var count = 0 ; 15 $(uke.data).each (function() { 16 $("#data_list").append("<tr id=\"data_id" + count + "\"></tr><br>") ; 17 $("#data_id" + count).append("<td><img src=" + this.pic + " width=100 height=100></td><br><br>") ; 18 $("#data_list #data_id" + count).append("<td><center>" + this.title + "</center></td><br><br>") ; 19 $("#data_list #data_id" + count).append("<td><audio src=" + this.bs + " controls></audio></td><br><br>") ; 20 count++ ; 21 }); 22 }); 23}); 24 25 </script> 26 <title>TITLE</title> 27 </head> 28<body> 29 <center> 30 <table> 31 <thead> 32 <tr> 33 <th width="100">カバー画像</th> 34 <th width="400">曲名</th> 35 <th width="300">再生</th> 36 </tr> 37 </thead> 38 <tbody id="data_list"> 39 </tbody> 40 </table> 41 </center> 42 </body> 43</html>

また、修正したことによりJSONファイルの内容が少し変わりました。

JSON

1{ 2 "data": [{ 3 "title": "TEST", 4 "bs": "http://xxxxx.com/mp3/xxx.mp3", 5 "artist": "TEST", 6 "pic": "https://xxxx.com/xx.png" 7 }, 8 { 9 "title": "TEST", 10 "bs": "http://xxxx.com/mp3/xxxx.mp3", 11 "artist": "TEST", 12 "pic": "https://xxxx.com/xx.png" 13 } 14 ] 15}

成功した際のスクリーンショット
![イメージ説明

ご回答くださった皆様には大変、感謝いたします。
ありがとうございました。

投稿2018/07/29 16:14

nnns

総合スコア10

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

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

0

ベストアンサー

フリーのレンタルサーバの為、容量上の観点から別のドメインに置く必要があると思い、jsonpを使おうと思いました。完成するまでは、サーバにアップロードせずPC内のみで作業をする予定です。よろしくお願い致します。

ChromeはローカルでAjaxを実行できません。

【[その他] ChromeにてAjaxでローカルファイルにアクセス】
https://qiita.com/cigalecigales/items/33afaa42f91542ffa62e

【Chromeではローカル内でJSONファイルが読み込めない | 林檎はいかが | MacとPC関連の情報サイトです。】
http://www.studiom-web.net/wp/blog/2013/07/07ではローカル内でjsonファイルが読み込めない/

サーバなしでJSONPを実行することはできなくは無いですが、サーバを使うほうが実装しやすいはずです。

【JSONPをごりごり実装するときのポイント】
https://qiita.com/stkdev/items/f3e6cae58ab73faee502

投稿2018/07/29 15:47

kei344

総合スコア69364

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

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

nnns

2018/07/29 16:03

ご回答頂き、ありがとうございます。 FireFoxで検証した結果、無事に動作いたしました。 ありがとうございます。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問