前提・実現したいこと

入力画面から移動してきた入力項目を確認画面でループを使うことで取得して、画面に出力させたいと考えております。同時に文字列として変数に代入したいと考えています。

ループさせる理由は、入力画面において、必要に応じて入力項目を増減できるようにしてあるためです。入力画面での項目増減は問題なく動いており、確認画面側でパラメータの遷移も下に記述したように問題なく受信できています。
現在起こっている問題で解決、（各keyごとのvalueをすべて出力したいのですが実際は、単に入っている項目数分のループを回るだけ（出力結果は一番最後のseiとmei のvalueが項目数分表示されるだけ）です。ここを修正したいと考えております。

受信したgetパラメータは次の通り
file:///D://index.html?sei=macbookpro&mei=apple&sei=dynabook&mei=toshiba

発生している問題・エラーメッセージ

期待している結果は
macbookpro
apple
dynabook
toshiba

実際の実行結果は以下の通り
dynabook
toshiba
dynabook
toshiba
dynabook
toshiba
dynabook
toshiba
dynabook
toshiba
dynabook
toshiba
ループの際の要素の取得と出力のさせ方で
解決方法をお持ちの方よろしくお願いします。

該当のソースコード

html
1<body>
2.
3.
4<div id="wrap">
5<!-- ここに製品名と個数を表示させたい -->
6</div>
7
8</body>
9</html>
10
11

javascript/jQuery
1//getUrlVarsはネット上でよく見かけるものを使わせていただきました。
2function getUrlVars() {
3var vars = [],
4hash;
5var hashes = window.location.href.slice(window.location.href.indexOf('?') + 1).split('&');
6for (var i = 0; i < hashes.length; i++) {
7hash = hashes[i].split('=');
8vars.push(hash[0]);
9vars[hash[0]] = decodeURIComponent(hash[1]);
10//varsの中身を確認 
11alert(vars[hash[0]]); //ここでの出力はhoge・meguro・ipad・3が順に出力される 
12}
13return vars;
14}
15
16$(function () {
17var queryString = getUrlVars();
18
19//問題の起きている箇所 getされたパラメータのvalueの取得がうまくいっていない
20for(var a of queryString){
21$('.wrap').append('<div class="sei">製品名：</div><br>');
22$('.sei').text(queryString.sei);
23$('.wrap').append('<div class="mei">個数:</div><br>');
24$('.mei').text(queryString.mei);
25}
26
27// カンマ区切りで各valueをtextに格納する 繰り返しで配列に格納していきたい ここでも上の表示にロジックと同じように、一番最後の要素のみ表示される
28
29var text = new Array();
30var i = 0;
31$.each(queryString, function(index,value){
32//一番最後の要素でない限り、カンマをつける
33if( (i+1) != queryString.length){
34qrCodeText = value + ",";
35}else{
36qrCodeText = value;
37}
38i = i + 1;
39});

試したこと

$('.wrap').append('<div class="sei">製品名：</div><br>');
の代わりに
document.getElementByID(wrap)を使用してみましたが、
dynabook
toshiba
・
・
のループの回数が、変わっただけでした。

環境

ブラウザ：google chrome
OS : windows 7 32bit

行動規範の内容に同意します

回答2件

基本的にgetでおなじパラメータを渡すと後の文字に上書きされます
やめたほうがよいでしょう。
httpサーバー上で処理をしていないようなのでまずはそのへんの
環境を整えるところから始めてください

sample

こんな感じで

javascript
1<script>
2const getUrlVars=()=>{
3  const vars = [];
4  const search=location.search.substr(1);
5  const hashes = search==""?[]:search.split('&');
6  hashes.forEach(x=>{
7    var hash = x.split('=');
8    vars.push([hash[0],decodeURIComponent(hash[1])]);
9  });
10  return vars;
11};
12$(function(){
13  var vars=getUrlVars();
14  vars.forEach(x=>{
15    $('.wrap').append(`<div class="${x[0]}">${x[1]}</div><br>`);
16  });
17});
18</script>
19<a href="?sei=macbookpro&mei=apple&sei=dynabook&mei=toshiba">click here</a>
20<div class="wrap"></div>

投稿2019/10/04 01:36

編集2019/10/04 03:49

yambejp

総合スコア116694

skj100

2019/10/04 03:27

ご回答ありがとうございます。確かにPHP等で処理したほうが良いとは存じますが、今回、諸事情によりサーバサイドは使えない状況です。そのうえで、改めて何か良い方策あればご教示いただきたく存じます。

yambejp

2019/10/04 03:49

一応sampleつけときました > 諸事情によりサーバサイドは使えないローカルにXAMPPでも入れれば済む話だと思いますが無理強いはしません

行動規範の内容に同意します

ベストアンサー

vars.push(hash[0]);
vars[hash[0]] = decodeURIComponent(hash[1]);

ここで、配列に値を２つ追加しているのが原因だと思います (他にもいろいろ気になるところはありますが……)

js
1function getUrlVars() {
2  const debug = true;
3  const hashes = debug? 
4    ['sei=macbookpro', 'mei=apple', 'sei=dynabook', 'mei=toshiba'] :
5    window.location.search.substring(1).split('&');
6  let vars = [];
7  hashes.forEach(h => {
8    let pair = h.split('=');
9    switch(pair[0]) {
10      case 'sei':
11        vars.push({
12          sei: decodeURIComponent(pair[1]),
13          mei: null
14        });
15        break;
16      case 'mei':
17        vars[vars.length - 1].mei = decodeURIComponent(pair[1]);
18        break;
19      default:
20        // any actions...
21    }
22  });
23  console.log(vars);
24  return vars;
25}
26
27(() => {
28  let html = '';
29  let texts = [];
30
31  const queryString = getUrlVars();
32  queryString.forEach(obj => {
33    html += `
34      <div class="sei">製品名：${obj.sei}</div>
35      <div class="mei">個数:${obj.mei}</div>
36    `;
37  });
38  document.getElementById('wrap').innerHTML = html;
39
40  // 何をしたいのか不明
41  var text = new Array();
42  var i = 0;
43  $.each(queryString, function(index,value){
44    //一番最後の要素でない限り、カンマをつける
45    if( (i+1) != queryString.length){
46      qrCodeText = value + ",";
47    }else{
48      qrCodeText = value;
49    }
50    i = i + 1;
51  });
52})();