前提・実現したいこと
現在非同期通信のインクリメンタルサーチを実装しております。
問題なくインクリメンタルサーチは実装でき、検索することで検索結果としてポストが表示されるようになりましたが、一点だけ問題が起きています。
各ポストには、acts-as-taggable-on gemを使ったタグがついています。
つまり、一つのポストには、一つ以上のタグが付随しています。
erbでは、map（やeach文）を使ってポストに付随するタグを一つずつ表示することができますが、
Jqueryのhtml内では、rubyを使うことができないため、タグを一つずつ表示できない状態です。
タグを一つずつ表示させ、各タグをクリックした場合、そのタグのページにいくようにしたいです。
発生している問題・エラーメッセージ
エラー文は特に発生しておりませんが、タグが一つずつではなく、配列の形で表示されてしまいます。
つまり以下の状態です。
現状：tag1,tag2,tag3 三つ纏まって一つのリンクとなっている
希望：tag1とtag2とtag3 のそれぞれ三つのリンクとなって欲しい
該当のソースコード
js
1$(function() {
2 var search_list = $(".posts__containers__container__right__posts");
3
4 function appendTweet(post) {
5 if(post.user_sign_in && post.user_sign_in.id == post.user_id){
6 var current_user =
7 `
8 <li>
9 <a href="/posts/${post.id}/edit" data-method="get" >
10 <i class="fas fa-edit"></i> Edit
11 </a>
12 </li>
13 <li>
14 <a href="/posts/${post.id}" data-method="delete" >
15 <i class="fas fa-trash-alt"></i> Delete
16 </a>
17 </li>
18 `
19 } else {
20 var current_user = ""
21 }
22
23 if(post.picture.url == null){
24 var picture =
25 `
26 <img src="/assets/account.png" />
27 `
28 } else {
29 var picture =
30 `
31 <img src = '${post.picture.url}'/>
32 `
33 }
34
35
36 var html =
37 `
38 <div class="posts__containers__container__right__posts__post">
39 <div class="posts__containers__container__right__posts__post__top">
40 <div class="posts__containers__container__right__posts__post__top__account">
41 ${picture}
42 </div>
43 <div class="posts__containers__container__right__posts__post__top__name">
44 <a href="/users/${post.user_id}">
45 ${post.nickname}
46 </a>
47 </div>
48 <div class="posts__containers__container__right__posts__post__top__manage">
49 <ul class="posts__containers__container__right__posts__post__top__manage__lists">
50 ${current_user}
51 </ul>
52 </div>
53 </div>
54 <div class="posts__containers__container__right__posts__post__bottom">
55 <img src = '${post.image.url}'/>
56
57 <div class="posts__containers__container__right__posts__post__bottom__caption">
58 <div class="posts__containers__container__right__posts__post__bottom__caption__top">
59 <div class="posts__containers__container__right__posts__post__bottom__caption__top__category">
60
61 <a href="">${post.tag_list} </a> //**該当箇所**こちらでタグを表示させています。
62
63 </div>
64 </div>
65 <div class="posts__containers__container__right__posts__post__bottom__caption__comment">
66 ${post.description}
67 </div>
68 </div>
69 </div>
70
71 `
72 search_list.append(html);
73 }
74
75 function appendErrMsgToHTML() {
76 var html = `
77 <div class="posts__containers__container__right__posts__nothing">
78 <i class="fas fa-camera-retro"></i><br>
79 No results<br>Let's share what you got!
80 </div>
81 `
82 search_list.append(html);
83 }
84
85
86
87 $(".search-input").on("keyup", function() {
88 var input = $(".search-input").val();
89
90 $('.posts__containers__container__right__title').hide();
91 $.ajax({
92 type: 'GET',
93 url: '/posts/search',
94 data: { keyword: input },
95 dataType: 'json'
96 })
97 .done(function(posts) {
98 search_list.empty();
99
100 if (posts.length !== 0) {
101 posts.forEach(function(post){
102 appendTweet(post);
103 });
104
105
106
107 }else {
108 appendErrMsgToHTML("");
109 }
110 })
111 .fail(function() {
112 alert('error');
113 });
114 });
115});
json
1json.array! @posts do |post|
2 json.id post.id
3 json.description post.description
4 json.image post.image
5 json.user_id post.user_id
6 json.nickname post.user.nickname
7 json.picture post.user.image
8 json.tag_list post.tag_list
9 json.user_sign_in current_user
10end
11
試したこと
.doneの中を以下のように変更してみて、tag_listをeach文で表示させてみようと試みましたが、
結果は、 同じポストがtag1、tag2、tag3分と三つ表示されるようになってしました。
つまり、以下のような状態で、同じAポストがタグの数分表示される状態。
Aポスト tag1
Aポスト tag2
Aポスト tag3
js
1・
2・
3・
4<div class="posts__containers__container__right__posts__post__bottom__caption__top__category">
5 <a href="">${tag}</a> //変更箇所
6 </div>
7 </div>
8 <div class="posts__containers__container__right__posts__post__bottom__caption__comment">
9 ${post.description}
10 </div>
11 </div>
12 </div>
13
14 `
15 search_list.append(html);
16 }
17
18 $(".search-input").on("keyup", function() {
19 var input = $(".search-input").val();
20
21 $('.posts__containers__container__right__title').hide();
22 $.ajax({
23 type: 'GET',
24 url: '/posts/search',
25 data: { keyword: input },
26 dataType: 'json'
27 })
28 .done(function(posts) {
29 search_list.empty();
30 if (posts.length !== 0) {
31 posts.forEach(function(post){
32 post.tag_list.forEach(function(tag){//変更箇所
33 appendTweet(post, tag);//変更箇所
34 });
35 });
36
37 }else {
38 appendErrMsgToHTML("");
39 }
40 })
41 .fail(function() {
42 alert('error');
43 });
44 });
45});
46
47
皆さんのお知恵を拝借させていただけますと幸いです。
よろしくお願い申し上げます。
Q&A
ベストアンサー
