JavaScript 複数の値を一つの値にまとめて出力したい

Question

前提・実現したいこと

javascript初心者です。
複数出力される値（商品コード）を、間に|を付けて一つの値にまとめる必要があります。
まず複数の値を配列にする必要があると思いますが、その方法が分かりません。

javascriptで
HIDDEN_DATA_FORMというフォームの中に、複数のITEM_CD（商品コード）が格納されていて、
それを動的に取得しています。

該当のソースコード

<script type="text/javascript">
    var itemCodes = document.forms.HIDDEN_DATA_FORM.ITEM_CD;

    for (var i = 0; i < itemCodes.length; i++) {
        var itemCodesCont = itemCodes[i].value;
    }
</script>

開発ツールのコンソールで上記コードのfor()内最後に
console.log(itemCodesCont);
と加えて実行すると、複数の商品コードを別々の値として
codeA
codeB
というように取得できます。
その複数のコードを|区切りで一つの値としてまとめて1つの変数の値として出力するにはどうすればいいでしょうか。
var mix = 'codeA|codeB';
という形にするイメージです。

|で区切ってまとめるのは、.join（'|'）を使うのではと考えています。

何卒、よろしくお願いいたします。

Comments

[yambejp]

質問本文中全角と半角の「｜」が混ざっていませんか？

[dscode]

ご指摘ありがとうございます。
失礼いたしました。
半角の|を区切りに使用します。

[mather]

コードブロックを使ってコードを書いてください。

```
この中にコードを書く
```

なお、「出力する」とは console.log() のことですか？

[dscode]

コードブロックについて失礼いたしました。

「出力する」とは、１つにまとめた値を変数mixとすると、
var mix = 'codeA|codeB';
という形にするということを言おうとしていました。

Answer 1

想定はこんなかんじですか？

<form name="HIDDEN_DATA_FORM">
<input type="text" name="ITEM_CD" value="CODE_A"><br>
<input type="text" name="ITEM_CD" value="CODE_B"><br>
<input type="text" name="ITEM_CD" value=""><br>
<input type="button" value="check" onclick="check()">
</form>

であれば

function check(){
  const itemCodesCont=[...document.querySelectorAll('form[name="HIDDEN_DATA_FORM"] [name="ITEM_CD"]')]
    .map(x=>x.value).filter(x=>x!=="").join('|');
  console.log(itemCodesCont);
}

Comments

[dscode]

ありがとうございます。
想定のHTMLは記述いただいたような形です。
参照させていただきます。

[yambejp]

formにnameをつけるのはあまりおすすめしません
idやclass、カスタムデータなどでアクセスしてください

[dscode]

ありがとうございます。

いただいたJavaScriptをChrome開発ツールに入力すると　undefinedとなりますが、どこか変えるべき部分がありそうでしょうか。

現在使用していますのが、ebisumartというECシステム固有の、購入完了ページに自動的に出力される下記のようなフォームです。

```
<form name="HIDDEN_DATA_FORM" m:id="HIDDEN_DATA_TAGS_HERE">
<input type="hidden" name="ITEM_NAME" value="（購入された商品の商品名）" />
<input type="hidden" name="ITEM_CD" value="（購入された商品の商品コード）" />
　　　（以下略）
```
動的に購入された商品や会員の情報を取得し、アフィリエイトタグにjsで反映して送信する、というタスクです。

固有に設定されたフォームですので、今回の場合はformのnameを変えることはできませんが、今後自身で作成する場合はformにnameを付けないよう留意します。
よろしければ、formにnameを付けない方が良い理由もお教えいただけますと助かります。

[yambejp]

サンプルです
https://codepen.io/yambejp/pen/VwPGKzX

> formにnameを付けない方が良い理由

https://developer.mozilla.org/ja/docs/Web/HTML/Element/form#attr-name

[dscode]

サンプルをありがとうございます。確認します。

> formにnameを付けない方が良い理由
こちらもありがとうございます。
こういったページも改めて読むように留意します。

[think49]

HTML5仕様通りに命名しているなら、document.forms.HIDDEN_DATA_FORM はユニークなform要素ノードを参照出来ます。　
.

[dscode]

>think49
ありがとうございます。このあたりも再度学習します。

[dscode]

＞yambejp
お陰様で、下記コードにした所、目的の文字列を得ることができました！ありがとうございました。

```
const itemCodes=[...document.querySelectorAll('form[name="HIDDEN_DATA_FORM"] [name="ITEM_CD"]')]
.map(x=>x.value).filter(x=>x!=="").join('|');
```

この形で購入商品に関する他の求める値も得ることができましたが、一点、商品購入数（name="ITEM_AMOUNT"）だけ得られていません。
コードは下記です。

```
const itemAmounts=[...document.querySelectorAll('form[name="HIDDEN_DATA_FORM"] [name="ITEM_AMOUNT"]')]
.map(x=>x.value).filter(x=>x!=="").join('|');
```

こちらをChrome開発モードに入れ console.log(itemAmounts);とすると、空白が出力されます。
原因はお分かりになりますでしょうか？
求めるものが購入数であり、他の文字列とは異なり数値であることと関係するかと思い、Number()で囲ってみたりしたのですが不成功です。

[yambejp]

HTMLを質問に追記してください
急にでてきたITEM_AMOUNTをどう理解していいかわかりません

[dscode]

失礼いたしました。
HTMLは下記になります。
```
<form name="HIDDEN_DATA_FORM">
<input type="hidden" name="ITEM_CD" value="（商品コード1）" />
<input type="hidden" name="ITEM_AMOUNT" value="（商品購入数1）" />
（後略）
<input type="hidden" name="ITEM_CD" value="（商品コード2）" />
<input type="hidden" name="ITEM_AMOUNT" value="（商品購入数2）" />
（後略）
</form>
```
こちらのHTML内のvalueに、購入商品の商品コードや購入数が動的に出力されています。
複数商品の購入があればその数だけ別のvalueが出力されています。
それらを同じnameごとに|で区切って束ねることが目的になります。

Answer 2

その複数のコードを｜区切りで一つの値としてまとめて1つの変数の値として出力するにはどうすればいいでしょうか。

結合については認識の通りjoinで問題ないかと思います。
要はvalueだけをまとめた配列を作ればいいのでmapを使って下記のようにしてはどうでしょうか？

const itemCodeAll = itemCodes.map((code) => code.value).join（'|'）;

Comments

[dscode]

ありがとうございます。
参照させていただきます。

[dscode]

いただいたコードをchromeの開発ツールのConsole内で、自身の変数設定と合わせて入力しておりますが、成功していない状態です。

```
var itemCodes = document.forms.HIDDEN_DATA_FORM.ITEM_CD;
const itemCodeAll = itemCodes.map((code) => code.value).join（'|'）;
for (var i = 0; i < itemCodes.length; i++) {
var itemCodesCont = itemCodes[i].value;
console.log(itemCodesCont);
}
```
上記ですと、下記エラーとなります。
Uncaught SyntaxError: Invalid or unexpected token
この場合どこが間違っているのでしょうか？