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

Question

###実現したいこと
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
// 上位１００件のスラッグを、あいうえお順に取得	
$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 の中身が、オートコンプリートに使える形の配列になってくれないわけです。

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

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

Comments

[maisumakun]

具体的に、「var test の中身」はどのような形になっていますか？

[dakarakarad]

c

[Lhankor_Mhy]

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

[x_x]

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

[dakarakarad]

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

Answer 1

さしあたり、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 ) ;

Comments

[dakarakarad]

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

Answer 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データの最後データの後ろにカンマは入れられません

Comments

[dakarakarad]

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

[ockeghem]

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

Answer 3

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

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

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

Comments

[dakarakarad]

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