AJAX卡關

#ajax

luck820129 2021-07-01 12:39:11 ‧ 1670 瀏覽

分享至

  success: function (data) {      // request 成功取得回應後執行
    let list_html = '';
    $.each(data, function (index, item) {
      console.log(item.item_id);
      console.log(item.star);
      list_html = `<li data-id="${item.item_id}" data-star="${item.star}" data-sort="${item.sort}">
    <div class="item_flex">
      <div class="left_block">
        <div class="btn_flex">
          <button type="button" class="btn_up">往上</button>
          <button type="button" class="btn_down">往下</button>
        </div>
      </div>
      <div class="middle_block">
        <div class="star_block">
          <span class="star" data-star="1"><i class="fas fa-star"></i></span>
          <span class="star" data-star="2"><i class="fas fa-star"></i></span>
          <span class="star" data-star="3"><i class="fas fa-star"></i></span>
          <span class="star" data-star="4"><i class="fas fa-star"></i></span>
          <span class="star" data-star="5"><i class="fas fa-star"></i></span>
        </div>
        <p class="para">${item.name}</p>
        <input type="text" class="task_name_update -none" placeholder="更新待辦事項…" value="${item.name}">
      </div>
      <div class="right_block">
        <div class="btn_flex">
          <button type="button" class="btn_update">更新</button>
          <button type="button" class="btn_delete">移除</button>
        </div>
      </div>
    </div>
  </li>`
    });
    $("ul.task_list").html(list_html);

  },

AJAX 從伺服器取得JSON陣列串接在HTML裡想知道為什麼我的each迴圈只會抓索引值為1的json陣列塞進去??

這是老師的範例我還是看不出差別在哪裡
求解

  success: function(data){      // request 成功取得回應後執行

      console.log(data);

      let list_html = '';

      $.each(data, function(index, item){
        
        list_html += '<li data-id="' + item.item_id + '" data-star="' + item.star + '" data-sort="' + item.sort + '">';
        list_html +=   '<div class="item_flex">';
        list_html +=     '<div class="left_block">';
        list_html +=       '<div class="btn_flex">';
        list_html +=         '<button type="button" class="btn_up">往上</button>';
        list_html +=         '<button type="button" class="btn_down">往下</button>';
        list_html +=       '</div>';
        list_html +=     '</div>';
        list_html +=     '<div class="middle_block">';
        list_html +=       '<div class="star_block">';
        list_html +=         '<span class="star' + (item.star >= 1 ? " -on" : "") + '" data-star="1"><i class="fas fa-star"></i></span>';
        list_html +=         '<span class="star' + (item.star >= 2 ? " -on" : "") + '" data-star="2"><i class="fas fa-star"></i></span>';
        list_html +=         '<span class="star' + (item.star >= 3 ? " -on" : "") + '" data-star="3"><i class="fas fa-star"></i></span>';
        list_html +=         '<span class="star' + (item.star >= 4 ? " -on" : "") + '" data-star="4"><i class="fas fa-star"></i></span>';
        list_html +=         '<span class="star' + (item.star >= 5 ? " -on" : "") + '" data-star="5"><i class="fas fa-star"></i></span>';
        list_html +=       '</div>';
        list_html +=       '<p class="para">' + item.name + '</p>';
        list_html +=       '<input type="text" class="task_name_update -none" placeholder="更新待辦事項…" value="' + item.name + '">';
        list_html +=     '</div>';
        list_html +=     '<div class="right_block">';
        list_html +=       '<div class="btn_flex">';
        list_html +=         '<button type="button" class="btn_update">更新</button>';
        list_html +=         '<button type="button" class="btn_delete">移除</button>';
        list_html +=       '</div>';
        list_html +=     '</div>';
        list_html +=   '</div>';
        list_html += '</li>';

      });

      $("ul.task_list").html(list_html);


    },

[
    {
        "item_id": 899,
        "name": "一二三",
        "star": 0,
        "sort": 1
    },
    {
        "item_id": 118,
        "name": "四五六",
        "star": 0,
        "sort": 1
    }
]

這是json取得的內容為一個陣列

看更多先前的討論...收起先前的討論...

japhenchen iT邦超人 1 級 ‧ 2021-07-01 13:06:21 檢舉

把你取得的json內容貼上來吧~沒猜錯的話應該是 { 開頭的吧

luck820129 iT邦新手 5 級 ‧ 2021-07-01 13:21:35 檢舉

[
{
"item_id": 899,
"name": "一二三",
"star": 0,
"sort": 1
},
{
"item_id": 118,
"name": "四五六",
"star": 0,
"sort": 1
}
]
這是我取得的json 為一個陣列型式

archer9080 iT邦研究生 3 級 ‧ 2021-07-01 13:26:58 檢舉

你們老師的json也是長這樣?

japhenchen iT邦超人 1 級 ‧ 2021-07-01 15:11:56 檢舉

我沒看到你的程式裡有用到index的情況啊，產生出來的HTML內容你貼上來看看

登入發表討論

直播研討會

{{ item.channelVendor }} {{ item.webinarstarted }} |

直播中

4 個回答

blacklotus0613

iT邦見習生 ‧ 2021-07-01 16:52:04

最佳解答

list_html += ...

回應 1
分享
檢舉

luck820129 iT邦新手 5 級 ‧ 2021-07-01 21:09:53 檢舉

謝謝解答後來解答為沒有+= 會覆蓋掉前一個

登入發表回應

小魚

iT邦大師 1 級 ‧ 2021-07-01 13:07:46

老師的範例執行出來怎麼樣?

回應 4
分享
檢舉

看更多先前的回應...收起先前的回應...

luck820129 iT邦新手 5 級 ‧ 2021-07-01 13:25:06 檢舉

不好意思已補充問題謝謝
[
{"item_id": 899,"name": "一二三","star": 0,"sort": 1
},
{"item_id": 118,"name": "四五六","star": 0,"sort": 1}
]
這是我取得的json 為一個陣列型式

小魚 iT邦大師 1 級 ‧ 2021-07-01 14:12:11 檢舉

不要管data了,
你的跟老師給的執行出來有哪裡不一樣嗎?

luck820129 iT邦新手 5 級 ‧ 2021-07-01 21:10:20 檢舉

謝謝各位大大不厭其煩的解答

小魚 iT邦大師 1 級 ‧ 2021-07-02 03:30:56 檢舉

你是不是有偷偷改老師的範例,
原本那個看起來就是有問題的.

登入發表回應

海綿寶寶

iT邦大神 1 級 ‧ 2021-07-01 17:13:52

確認一下
你有parseJSON嗎？

data = $.parseJSON(data);
$.each(data, function(i, item) {
    alert(item);
});

資料來源

回應
分享
檢舉

登入發表回應

㊣浩瀚星空㊣

iT邦大神 1 級 ‧ 2021-07-01 18:57:54

你先用F12看一下你輸出的 console 資料格式是什麼。

正常來說你因該會看到的是如下

+ data(6)

類似物件格式的資料畫面。還可以展開的
而不是

[
{"item_id": 899,"name": "一二三","star": 0,"sort": 1
},
{"item_id": 118,"name": "四五六","star": 0,"sort": 1}
]

這樣的東西

如果你看到的是後者。
理論上你也會獲得錯誤才對。

如果是前者。可以先在其console下看看，你獲得的陣列數有多少。
如我上面是6。那就是有6個。
最後，可以先不要放上 list_html += 那些程式碼。
先學會查看獲得的資料是什麼。
DEBUG模式會告訴你很多。

不要一直用自已的思維去覺得怎麼怎麼。像鬼打牆似的。
你也可以PO出你的console看到的畫面為何。會有利於幫你查找問題的。
不要用認為自已的DATA正確沒事。
因為像如下的東西

data = '[
{"item_id": 899,"name": "一二三","star": 0,"sort": 1
},
{"item_id": 118,"name": "四五六","star": 0,"sort": 1}
]';

與

data = [
{"item_id": 899,"name": "一二三","star": 0,"sort": 1
},
{"item_id": 118,"name": "四五六","star": 0,"sort": 1}
]

這兩者是不一樣的東西。上面一個是文字。下面的才是陣列格式。