PHPの投稿フォームでタグを入力したときに返ってくる値について

Question

前提・実現したいこと

PHPとtagifyで複数のタグを選択できるフォームを作成してますが、
tagifyでタグを選択したときに返ってくる値がおかしいです。

##現状
複数のタグを選択

複数のタグを

$tags = $_POST['tags'];

で受け取る

var_dumpで中身を調べると、

"[{"value":"急募"},{"value":"アフターフォロー"}]"

と返ってくる。

返ってくる値で、"value":の部分が邪魔。これを消して、急募、アフターフォローだけ返すようにしたい。

該当のソースコード

タグの選択フォーム

        <div class="mb-3 tag-form">
          <input name="tags" class='tag_field' placeholder="＋タグの候補を選択してください。(最大5つまで選択可能)" value='<?php if(isset($tags)) echo h($tags) ?>'>
        </div>

tagifyを用いたjavascript

var input = document.querySelector('input[name="tags"]'),
    // init Tagify script on the above inputs
    tagify = new Tagify(input, {
      whitelist:["急募","アフターフォロー","低価格","要相談"],
      maxTags: 5,
      dropdown: {
        maxItems: 50,           // <- mixumum allowed rendered suggestions
        classname: "tags-look", // <- custom classname for this dropdown, so it could be targeted
        enabled: 0,             // <- show suggestions on focus
        closeOnSelect: false    // <- do not hide the suggestions dropdown once an item has been selected
      }
    });

// "remove all tags" button event listener
document.querySelector('.tags--removeAllBtn')
    .addEventListener('click', tagify.removeAllTags.bind(tagify))

// Chainable event listeners
tagify.on('add', onAddTag)
      .on('remove', onRemoveTag)
      .on('invalid', onInvalidTag);

// tag added callback
function onAddTag(e){
    console.log(e, e.detail);
    console.log( tagify.DOM.originalInput.value )
    tagify.off('add', onAddTag) // exmaple of removing a custom Tagify event
}

// tag remvoed callback
function onRemoveTag(e){
    console.log(e, e.detail);
}

// invalid tag added callback
function onInvalidTag(e){
    console.log(e, e.detail);
}

試したこと

trimなどで配列の文字列削除を試みたが、変わらない。

    tagify = new Tagify(input, {
      whitelist:["急募","アフターフォロー","低価格","要相談"]

この部分が怪しいと思うのですが、tagifyの公式コードになるので現状そのまま。
whitelist:とかいじるとエラーになる。

Answer 1

まずは公式ドキュメントを読んでみましょう

Modify original input value format
Default format is a JSON string:
'[{"value":"cat"}, {"value":"dog"}]'

ということで、これはJSONという形式の文字列です。
PHPでJSONを扱うには、
JavaScript Object Notation ¶
にある、

JSON 関数
json_decode — JSON 文字列をデコードする
json_encode — 値を JSON 形式にして返す

この辺りを使います。

例えば

<?php
// Your code here!
$str = '[{"value":"急募"},{"value":"アフターフォロー"}]';

var_dump(json_decode($str,true));

とすると

array(2) {
  [0]=>
  array(1) {
    ["value"]=>
    string(6) "急募"
  }
  [1]=>
  array(1) {
    ["value"]=>
    string(24) "アフターフォロー"
  }
}

こんな感じの配列として扱うことができます。

Comments

[退会済みユーザー]

ありがとうございます。
このように配列にできたんですね。勉強になりました。
ただ、疑問点として、全てid部分が全てvalueになってしまうのがわからず...って感じでした。

[tanat]

IDが無くてもタグ名からSELECTすればいい気がしますが。。。何のためにIDを必要としていますか？

回答中の公式ドキュメントの

この辺 https://github.com/yairEO/tagify/blob/master/README.md#adding-tags-dynamically
を参考にして、IDを追加すれば、IDをJSONに持った状態でPOSTされそうな気がします。（ざっとしか読読んでないので間違ってるかも）
Adding tags dynamically
var tagify = new Tagify(...);

tagify.addTags(["banana", "orange", "apple"])

// or add tags with pre-defined propeties

tagify.addTags([{value:"banana", color:"yellow"}, {value:"apple", color:"red"}, {value:"watermelon", color:"green"}])

ただ、基本がおぼつかない状態で手を広げると、分からないところが広がって大変になるので、
まずはtagifyを使わずにチェックボックス（おすすめ）や複数選択セレクトボックスを自力で書いて実装してみることをお勧めしますよ。

[退会済みユーザー]

IDが欲しい理由は、中間テーブルにタグidをinsertしたいからです。ですが、Selectでタグ名を取得し、そこからID検索すれば行けるような気がして来ました。

確かに、あまり拡大しすぎると手が回らなくなる可能性大なので、ご指摘いただきありがとうございました。

[tanat]

> Selectでタグ名を取得し、そこからID検索すれば行けるような気がして来ました

はい、タグ名で検索してそこからIDを取得できますね。