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

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

ただいまの
回答率

90.35%

JSON.parseしても配列の形式にならない

解決済

回答 3

投稿

  • 評価
  • クリップ 1
  • VIEW 583

dakarakarad

score 11

実現したいこと

WordPressのタグ入力でオートコンプリートを付けたいです。
ゴールはこのような感じです。
https://jsfiddle.net/xrv2egta/

問題

このゴールを目指して後述する「該当のソースコード」を書きました。

大体は出来たのですが、JSON.parseしても配列の形式にならない点が問題です。と言いますのは、

上記でゴールとしたJSfiddleの配列はこうですが、

  var wordlist = [
    "あいうえお",
    "かきくけこ",
    "さしすせそ",
  ];

しかし後述する該当のソースコードではこうなってしまうんです。

  var wordlist = JSON.parse('[
    "あいうえお",
    "かきくけこ",
    "さしすせそ",
  ]');

このように、「JSON.parseされたもの」と「オートコンプリートで使うためのもの」とが違う形になってしまうところで躓いています。

どうしたら同じになるでしょうか?

該当のソースコード

index.phpにこのような内容を書いています。あとは配列の形だけできればゴールだと思うのですが、どうしてもできません。

<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/themes/smoothness/jquery-ui.css">

<input type="text" id="hogehoge" class="ui-autocomplete-input" autocomplete="off">

<?php
// 上位100件のスラッグを、あいうえお順に取得    
$terms_args = array( 'number' => 100, 'orderby' => 'count', 'order' => 'DESC' );
$terms_all = get_terms( 'my_tag', $terms_args );
$terms_arr = array();
if( !empty( $terms_all ) && !is_wp_error( $terms_all ) ):
    foreach( $terms_all as $term ) :
        array_push( $terms_arr, $term->name );
    endforeach;
endif;
$terms_json = json_encode( $terms_arr, JSON_PRETTY_PRINT|JSON_UNESCAPED_UNICODE|JSON_UNESCAPED_SLASHES ) ;                            
?>

<script>
// オートコンプリート機能を実装する
(function($){
    // JSON.parseを使って配列を受け取る
    var test = JSON.parse('<?php echo $terms_json; ?>');
    // 配列を使ってオ―とコンプリートを表示する
    $( "#hogehoge" ).autocomplete({
        source: test
    });
})(jQuery);    
</script>


こちらのソースコードでは、JSON.parseされたvar test の中身が、オートコンプリートに使える形の配列になってくれないわけです。

これはどのようにすれば正しい配列になるのでしょうか?

長々とすみません。どなたか解決策が分かる方がいらっしゃいましたら教えて頂けませんでしょうか?
どうぞ宜しくお願い致します。

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

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

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

    クリップを取り消します

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

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

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

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

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

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

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

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

    質問の評価を下げる

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

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

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

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

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

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

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

    詳細な説明はこちら

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

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

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

質問への追記・修正、ベストアンサー選択の依頼

  • Lhankor_Mhy

    2019/02/13 09:20

    JSON.parse しない、という方法はダメなんでしょうか。

    キャンセル

  • x_x

    2019/02/13 10:37

    末尾にカンマがあるということですか?

    キャンセル

  • dakarakarad

    2019/02/13 20:46

    みなさまありがとうございます。yambejpさまのご回答で思うような配列ができました。

    キャンセル

回答 3

+4

さしあたり、JavaScriptの文字列リテラル中に改行は入れられないので、以下の行を…

$terms_json = json_encode( $terms_arr, JSON_PRETTY_PRINT|JSON_UNESCAPED_UNICODE|JSON_UNESCAPED_SLASHES ) ;

以下のように変更(JSON_PRETTY_PRINTを削除)すれば動くのではないでしょうか?

$terms_json = json_encode( $terms_arr, JSON_UNESCAPED_UNICODE|JSON_UNESCAPED_SLASHES ) ;

                 

投稿

  • 回答の評価を上げる

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

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

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

  • 回答の評価を下げる

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

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

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

  • 2019/02/13 20:44

    ありがとうございます。注意します。

    キャンセル

checkベストアンサー

+2

整形されたjsonデータはバックスラッシュで囲んでください

<?PHP
$terms_json=json_encode([
  "あいうえお",
  "かきくけこ",
  "さしすせそ",
  ],JSON_UNESCAPED_UNICODE| JSON_PRETTY_PRINT );
?>
<script>
var text=`<?=$terms_json?>`;
console.log(text);
var wordlist = JSON.parse(text);
console.log(wordlist);
</script>


ただしJSONデータの最後データの後ろにカンマは入れられません

投稿

  • 回答の評価を上げる

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

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

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

  • 回答の評価を下げる

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

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

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

  • 2019/02/13 20:44

    ありがとうございます。思うような配列になりました。

    キャンセル

  • 2019/02/13 20:58

    バックスラッシュではなく、バッククォートですよね。
    バッククォート(テンプレートリテラル)はIE11では動かないので、IE11が対象であれば別の方法を考える必要があります。

    キャンセル

+1

JSON(JavaScript Object Notation)はそのままJavaScriptのコードなので、

var test = <?php echo $terms_json; ?>;

とすれば動きそうですが、 JSON.parse を使うことが必須の課題なのでしょうか?
ただし、実際に使うときは自分で発行したJSONデータのみが $terms_json に入るように(任意のコードが挿入されないように)気をつけてください。

投稿

  • 回答の評価を上げる

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

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

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

  • 回答の評価を下げる

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

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

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

  • 2019/02/13 20:45

    ありがとうございます。JSON.parseの意味をよくわかっておりませんでした。

    キャンセル

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

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

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