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

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

新規登録して質問してみよう
ただいま回答率
85.50%
HTML5

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

Q&A

解決済

4回答

337閲覧

jQueryの配列の繰り返し処理の操作について

hiro0208

総合スコア75

HTML5

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

0グッド

0クリップ

投稿2017/06/27 06:23

編集2017/06/27 07:05

配列arrayStaffに格納されている値を全部、ブラウザに表示させたいのですが、
配列の操作の記述がわからない為、ご教授いただければと思います。

下記の記述だと、
アラートalert(arrayStaff[obj]);では,配列arrayStaffに格納されている値obj
の数だけポップアップが上がり値が表示されるのですが、

ブラウザには取得した最後の値しか、表示させれません。
全て表示させるには、どのように記述すればよいでしょうか?
よろしくお願いいたします。

javascript

1 2var query = {mail: ['1', '2', '3']}, 3 arrayStaff = ['name1', 'name2', 'name3']; 4 5function confirm() { 6 $.each(query['mail'], function(i, obj) { 7 $('#set_mail').text(arrayStaff[obj]); 8 alert(arrayStaff[obj]); 9 }); 10}

html

1<div id="set_mail"></div>

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

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

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

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

think49

2017/06/27 07:02

{mail: [1, 2, 3]} とありますが、arrayStaff[3] は存在しないので、[0,1,2] が正解ではないでしょうか。
hiro0208

2017/06/27 07:07

すみません。そうですね。。。ただ連想配列だったため修正しました。
guest

回答4

0

元のコード(想定)

query, arrayStaff がよくわかりませんが、こういう事でしょうか。
HTML/JavaScript含めて、最低限、質問文中にある情報だけで動くようにしてください。

HTML

1<div id="set_mail"></div> 2<script> 3'use strict'; 4var query = {mail: [0, 1, 2]}, 5 arrayStaff = ['foo@example.com', 'bar@example.com', 'piyo@example.com']; 6 7function confirm () { 8 $.each(query['mail'], function(i, obj) { 9 $('#set_mail').text(arrayStaff[obj]); 10 alert(arrayStaff[obj]); 11 }); 12} 13 14confirm(); 15</script>

解決コード(配列版)

JavaScript

1'use strict'; 2var query = {mail: [0, 1, 3]}, 3 arrayStaff = ['foo@example.com', 'bar@example.com', 'piyo@example.com', 'hoge@example.com']; 4 5 6$('#set_mail').text(query.map(i => arrayStaff[i]));

解決コード(オブジェクト版)

HTML

1<div id="set_mail"></div> 2 3<script> 4'use strict'; 5var query = {mail: {foo: 'foo', bar: 'bar', hoge: 'hoge'}}, 6 arrayStaff = {foo: 'foo@example.com', bar: 'bar@example.com', piyo: 'piyo@example.com', hoge: 'hoge@example.com'}; 7var mail = Object.keys(query['mail']).map(key => arrayStaff[query['mail'][key]]); 8 9$('#set_mail').text(mail); 10</script>

Re: hiro0208 さん

投稿2017/06/27 06:36

編集2017/06/27 07:23
think49

総合スコア18156

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

hiro0208

2017/06/27 06:50

配列の中身は、そのようになっています。 追記します。
think49

2017/06/27 06:53

想定が正しいのなら手元の環境では解決できていますが、どうでしょう? 親記事を修正しました。
think49

2017/06/27 06:59

問題点が分かったので、親記事を再修正しました。
hiro0208

2017/06/27 07:10

ありがとうございます。 その出力ですと、表示が[object Object]になります。 arrayStaffがキーなしの配列のためでしょうか。。。
think49

2017/06/27 07:14

arrayStaff は配列に読めますが…。 そもそも、query['mail'] も配列なので、Array#map の返り値も配列になるはずです。 掲示されたコードと条件が違うようなので、再現可能なコードをください。
think49

2017/06/27 07:24

適当にコードを想定して、親記事を追記しました。
hiro0208

2017/06/27 07:31

すみません。しっかりわかるようコードを出せればよいのですが、 思った以上なボリュームになりそうなので、自身でも見直ししてみて改めてみます ありがとうござました。
guest

0

ベストアンサー

とりあえずspanに入れてみました。

JavaScript

1function confirm() { 2 $('#set_mail').empty(); 3 $.each(query['mail'], function(i, obj) { 4 $('#set_mail').append($('<span></span>', { text: arrayStaff[obj] })); 5 alert(arrayStaff[obj]); 6 }); 7}

本当にテキストのみにしたいのなら、document.createTextNode()を使ってください。
https://developer.mozilla.org/ja/docs/Web/API/Document/createTextNode

投稿2017/06/27 06:56

x_x

総合スコア13749

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

0

何か、ソースの意図と書かれている希望した動作が食い違っているように見えますが、とりあえずarrayStaffの内容を連結するだけなら

arrayStaff.join("")

だけで出来るかと思います。

投稿2017/06/27 06:36

yoorwm

総合スコア1305

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

0

$('#set_mail').text(arrayStaff[obj]);

で毎回textを上書きしていませんか?

投稿2017/06/27 06:33

yambejp

総合スコア114572

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

hiro0208

2017/06/27 06:44

上書きになってしまっているかもしれません。 しないために、変数の代入の仕方考えてもいるんですが、、、、
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問