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

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

新規登録して質問してみよう
ただいま回答率
85.35%
Google スプレッドシート

Google スプレッドシートは、フリーで利用できる表計算ソフト。Webアプリのためインターネットに接続することで利用できます。チャートやグラフの作成のほか、シートを他のユーザーと共有したり、同時に作業を進めることも可能です。

HTML5

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

JSON

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

Webサイト

一つのドメイン上に存在するWebページの集合体をWebサイトと呼びます。

HTML

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

Q&A

0回答

955閲覧

JSONを取得したあとテーブルとして表示し、そのあとQuicksearchをかけても動作しない。

programming-go

総合スコア55

Google スプレッドシート

Google スプレッドシートは、フリーで利用できる表計算ソフト。Webアプリのためインターネットに接続することで利用できます。チャートやグラフの作成のほか、シートを他のユーザーと共有したり、同時に作業を進めることも可能です。

HTML5

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

JSON

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

Webサイト

一つのドメイン上に存在するWebページの集合体をWebサイトと呼びます。

HTML

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

0グッド

0クリップ

投稿2020/10/17 22:33

GoogleスプレッドシートのGASでテーブルデータをJSONに変換し、それをwebアプリケーションとして取得し、
テーブルとして表示することはできましたが、検索機能をかけたいと思い、Quicksearchを導入しようと思ったけれど、
動作をしていません。


共有スプレッドシートのリンクは隠していますが、次のようなデータが返ってきます。
#返ってくるJSONデータ

json

1[ 2 { 3 "pref_name": "都道府県名", 4 "song_title": "曲名", 5 "playing_type": "えんそうの形", 6 "instrument_and_voice_timbre": "楽器や声の音色", 7 "music_feature": "音楽の特徴", 8 "discovery_impression": "発見、感想", 9 "related_festival_and_event_what_month_where": "関連の祭りやイベント(何月ごろ、どこで)", 10 "beginning_and_origin": "始まりや由来", 11 "reference_url": "参考URL", 12 "youtube_url": "YouTube" 13 }, 14 { 15 "pref_name": "岐阜県", 16 "song_title": "春駒(はるこま)", 17 "playing_type": "祭り舞台の上", 18 "instrument_and_voice_timbre": "横笛、締め太鼓、三味線、男声", 19 "music_feature": "「はるこま、はるこま」というお囃子が歌の合間に繰り返し歌われ、三味線や笛の響きと重なって、にぎやかで楽しい感じ", 20 "discovery_impression": "区切りがはっきりして、リズミカルで勢いがある", 21 "related_festival_and_event_what_month_where": "郡上おどり、お盆、岐阜県郡上市八幡町(郡上八幡)", 22 "beginning_and_origin": "鎌倉時代のお殿様の馬のことを歌った歌だが、江戸時代馬の名産地だったことを反映しているという説もある。", 23 "reference_url": "http://www.gujohachiman.com/kanko/odori.html", 24 "youtube_url": "https://www.youtube.com/watch?v=q1DHd7CyMHg" 25 } 26]

#index.html

html

1<!DOCTYPE html> 2<html lang="en"> 3 4<head> 5 <meta charset="UTF-8"> 6 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 7 <title>地域につたわる音楽に親しもう!</title> 8 <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" 9 integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous"> 10 <link href="https://fonts.googleapis.com/css2?family=M+PLUS+1p&display=swap" rel="stylesheet"> 11 <style> 12 .jumbotron { 13 background-image: url(https://lh3.googleusercontent.com/0I7sY9S1lmMONPz57YL7JzC6WBKdTr6U408GXXwNbCX9KjU-ADrM5KYP18vjQo9OlZIIBs79LhsaWQr3cTOAwLa1RnvaBEodjv6Rwc5S-FKhB1__tziahywskTCf4f40nYcO1yUD5w); 14 color: orange; 15 text-shadow: 1px 0 10px black; 16 } 17 </style> 18 19<script src="https://code.jquery.com/jquery-3.3.1.min.js" crossorigin="anonymous"></script> 20</head> 21 22<body> 23 <div class="jumbotron jumbotron-fluid"> 24 <div class="container"> 25 <h2 class="display-4">地域に伝わる音楽にしたしもう!</h2> 26 </div> 27 </div> 28 <form action="#"> 29 <input type="text" name="search" value="" id="search" /> 30 </form> 31 <table class="table table-striped text-nowrap"> 32 <tbody> 33 34 <script> 35 $(function () { 36 $.getJSON("https://script.google.com/macros/s/XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX/exec", function (ongakudata) { 37 for (var i in ongakudata) { 38 var table = '<tr class="border search-target">' 39 + '<td scope="row">' + ongakudata[i].pref_name + '</td>' 40 + '<td>' + ongakudata[i].song_title + '</td>' 41 + '<td>' + ongakudata[i].playing_type + '</td>' 42 + '<td>' + ongakudata[i].instrument_and_voice_timbre + '</td>' 43 + '<td>' + ongakudata[i].music_feature + '</td>' 44 + '<td>' + ongakudata[i].discovery_impression + '</td>' 45 + '<td>' + ongakudata[i].related_festival_and_event_what_month_where + '</td>' 46 + '<td>' + ongakudata[i].beginning_and_origin + '</td>' 47 + '<td>' + ongakudata[i].reference_url + '</td>' 48 + '<td>' + ongakudata[i].youtube_url + '</td></tr>' 49 $("tbody").append(table); 50 } 51 }); 52 }); 53 </script> 54 </tbody> 55 </table> 56 <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" 57 integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" 58 crossorigin="anonymous"></script> 59 <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" 60 integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" 61 crossorigin="anonymous"></script> 62<script src="https://raw.githubusercontent.com/DeuxHuitHuit/quicksearch/master/dist/jquery.quicksearch.min.js"></script> 63 64 65 <script> 66 $(function(){ 67 $('input#search').quicksearch('table tbody tr'); 68}); 69 </script> 70</body> 71 72</html>

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

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

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

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

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

guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

まだ回答がついていません

会員登録して回答してみよう

アカウントをお持ちの方は

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

ただいまの回答率
85.35%

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

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

質問する

関連した質問