Hỏi về cách bỏ qua các URL trùng lập

#1

Chào mọi người, lại là em với đoạn code lấy text bài viết đem ra ngoài trang chủ.
Code e bị mắc lỗi là lập lại các url đã get lúc trước, cho e hỏi là là làm sao để ko get lại các url đã get trước đó ko ạ.

$('.block-posts .grid-item').each(function() {
    var get = $(this),
        title = get.find(".entry-title-link"),
        version = get.find(".post-excerpt__version"),
        mod = get.find(".post-excerpt__mod"),
        getURL = get.attr('data-url');
    $.get(getURL, function(data) {
      $(".entry-body.hidden").removeClass('hidden');
      var get_title = $(data).find('.file-name').text(),
          get_version = $(data).find('.version').text(),
          get_mod = $(data).find('.mod-features').text();
      title.html(get_title);
      version.html(get_version);
      mod.html(get_mod)
    });
  });

getURL là url của blog e luôn (mã nguồn blogspost)
Link blog
Cám ơn mọi người!

1 Like
#2

Lưu các url đã lấy vài một mảng (toàn cục). Trước khi thực hiện lấy dữ liệu thì kiểm tra xe nó đã có trong mảng chưa, có rồi thì không làm gì nữa.

2 Likes
#3

em thêm vào thì nó chỉ thêm 1 url sao đó in ra và tiếp tục như vậy chứ ko thêm vào hết arr được ạ, vì có cái each

$('.block-posts .grid-item').each(function() {
    var get = $(this),
        title = get.find(".entry-title-link"),
        version = get.find(".post-excerpt__version"),
        mod = get.find(".post-excerpt__mod"),
        getURL = get.attr('data-url'),
        arr = [];
    arr.push(getURL);
    console.log(arr);
});
#4

Hiểu ý mình nói toàn cục (global) là sao không?
Thấy bạn khai báo arr = []; là thấy không toàn cục rồi.

2 Likes
#5

E làm được rồi,

var arr = [],
    arr_title = [],
    arr_version = [],
    arr_mod = [];
$('.block-posts .grid-item').each(function() {
  var get = $(this),
      title = get.find(".entry-title-link"),
      version = get.find(".post-excerpt__version"),
      mod = get.find(".post-excerpt__mod"),
      getURL = get.attr('data-url');
  arr_title.push(title);
  arr_version.push(version);
  arr_mod.push(mod);
  arr.push(getURL);
});

$(arr).each(function(i, url) {
  var title = arr_title[i],
      version = arr_version[i],
      mod = arr_mod[i];
  $.get(url, function(data) {
    $(".entry-body.hidden").removeClass('hidden');
    var get_title = $(data).find('.file-name').text(),
        get_version = $(data).find('.version').text(),
        get_mod = $(data).find('.mod-features').text();
    title.html(get_title);
    version.html(get_version);
    mod.html(get_mod)
    console.log(get_title,get_version,get_mod);
  });
})

anh xem code này có rút ngắn lại được nữa ko a?

#6

Ngắn hơn thì bạn nên gom vào 1 đối tượng.

arr = [];
// không cần các arr còn lại
//...
arr.push({url: getURL, title: title, version: version, mod: mod});
//...
var title = arr[i].title;
//...

À mà, bạn phải so sánh trùng nhau nữa chứ nhể.

3 Likes
#7

oke a, em làm được rồi. Cám ơn anh rất nhiều ^^
lọc trùng thì e dùng cái này

arr.filter((item, index) => {
    return arr.indexOf(item) === index
});
1 Like
#8

sory lại làm phiền a, nhưng cái anh gộp lại thì nó ko check trùng được anh ạ, vì arr giờ không phải url nữa

window.addEventListener('load',function(){
    var loadcontent = false;
    $(window).on('scroll', function() {
        if (!loadcontent) {
          loadcontent = true;
          $('.blog-posts .blog-post').each(function() {
            var get = $(this),
                title = get.find(".entry-title-link"),
                version = get.find(".post-excerpt__version"),
                mod = get.find(".post-excerpt__mod"),
                getURL = get.attr('data-url');
            $.get(getURL, function(data) {
              $(".entry-body.hidden").removeClass('hidden');
              var get_title = $(data).find('.file-name').text(),
                  get_version = $(data).find('.version').text(),
                  get_mod = $(data).find('.mod-features').text();
              title.html(get_title);
              version.html(get_version);
              mod.html(get_mod)
            });
          });
      }
    });
  });
  var arr = [];
  $('.block-posts .grid-item,.blog-posts .blog-post').each(function() {
    var get = $(this),
        title = get.find(".entry-title-link"),
        version = get.find(".post-excerpt__version"),
        mod = get.find(".post-excerpt__mod"),
        getURL = get.attr('data-url');
    arr.push({ url: getURL, title: title, version: version, mod: mod });
  });
  arr.filter((item, index) => {
    return arr.indexOf(item) === index
  });
  $(arr).each(function(i, url) {
    var title = arr[i].title,
        version = arr[i].version,
        mod = arr[i].mod;
    $.get(url, function(data) {
      $(".entry-body.hidden").removeClass('hidden');
      var get_title = $(data).find('.file-name').text(),
          get_version = $(data).find('.version').text(),
          get_mod = $(data).find('.mod-features').text();
      title.html(get_title);
      version.html(get_version);
      mod.html(get_mod)
    });
  })
#9

e muốn kiểu, có 15 bài viết ở 3 layout thì sẽ có tầm 3 bài giống nhau (ví dụ) thì nếu xoá đi giá trị trùng lập vậy thì khi nó gán cho post thì sẽ thiếu không a? nếu thiếu thì em muốn cái nào trùng thì sẽ gán cho nó giá trị trùng kia (kiểu chỉ get 1 url trùng, vì get nhiều url trùng lặp tăng requests)
Mong a trả lời

#10
  1. Do thay đổi sang kiểu đối tượng nên trong phương thức filter() không trả về đúng nữa. Sửa thành:
arr.filter((item, index) => arr.findIndex((e) => e.url == item.url) == index);
  1. Trong sự kiện scroll, bạn không cần dùng ajax để tải nữa, chỉ cần lấy dữ liệu đã tải ở arr thôi. Khai báo arr phí trước sự kiện này.
// Trong each() của sự kiện scroll
getURL = get.attr('data-url');
var data = arr.find((e) => e.url == getURL);
title.html(data.title);
// tương tự...

Do bất đồng bộ nên có thể dữ liệu chưa tải xong. Cần lưu ý.

3 Likes
#11

cái 1 console ra cái nào a?
còn cái 2 thì e chưa hiểu lắm. là 3 đoạn đó để ở đâu trong code. scrool e chỉ dùng để trì hoãn việc tải url lúc đầu thôi.

  var arr = [];
  $('.block-posts .grid-item,.blog-posts .blog-post').each(function() {
    var get = $(this),
        title = get.find(".entry-title-link"),
        version = get.find(".post-excerpt__version"),
        mod = get.find(".post-excerpt__mod"),
        getURL = get.attr('data-url');
    arr.push({ url: getURL, title: title, version: version, mod: mod });
  });
  arr.filter((item, index) => arr.findIndex((e) => e.url == item.url) == index);
  $(arr).each(function(i, url) {
    var title = arr[i].title,
        version = arr[i].version,
        mod = arr[i].mod;
    $.get(url, function(data) {
      $(".entry-body.hidden").removeClass('hidden');
      var get_title = $(data).find('.file-name').text(),
          get_version = $(data).find('.version').text(),
          get_mod = $(data).find('.mod-features').text();
      title.html(get_title);
      version.html(get_version);
      mod.html(get_mod)
    });
  })
#12

Ý tưởng của bạn cứ “mọc” ra từng tí một, nhưng mỗi lần sửa lại sửa gần hết nội dung.
Giải thích đơn giản:
Tải dữ liệu trước theo url mà chưa gán, dữ liệu sẽ được lưu lại. Sau đó mới gán dữ liệu vào các phần tử html và dựa theo url.

- arr = []
- each()
- arr.filter()
- arr.get() // chỉ lưu lại không gán trực tiếp
- $(".block-post...").each(...
- // không cần dùng get nữa
- var data = arr.find(); // tìm theo url
- title.html(data.title);
- //...

Cách này sẽ làm dữ liệu bị bất đồng bộ.

Lưu các phần tử html có url giống nhau vào 1 mảng. Sau đó tải dữ liệu, tải xong, dữ liệu sẽ được gán vào mảng các phần tử có chung url.
=> Mỗi url chỉ tải 1 lần, tải xong dữ liệu được gán đồng loạt cho các phần tử có url giống nhau.

arr = []
$(".block-posts ...").each(() => {
    var get = $(this),
    //... 
    getURL = get.attr('data-url');
    var a = arr.find((e) => e.url == getURL);
    a && a.elements.push({title: title, version: version...}) || arr.push({url: getURL, elements: [{title: title, version: version...}]});
});
// không cần filter() nữa
$(arr).each((index, item) => {
    $.get(item.url, (data) => {
        //Nhận dữ liệu
        $(item.elements).each((i, ele) => {
            ele.title.html(get_title);
            // tương tự cho version , mod
        });
    });
});

Nguyên đoạn này bạn có để trong sự kiện nào bạn muốn.

4 Likes
#13

chạy ko được a ơi, em log thử cái getURL nó ko có url

var  arr = [];
$(".block-posts .grid-item,.blog-posts .blog-post").each(() => {
    var get = $(this),
        title = get.find(".entry-title-link"),
        version = get.find(".post-excerpt__version"),
        mod = get.find(".post-excerpt__mod"),
        getURL = get.attr('data-url');
      var  a = arr.find((e) => e.url == getURL);
    a && a.elements.push({title: title, version: version, mod: mod}) || arr.push({url: getURL, elements: [{title: title, version: version, mod: mod}]});
});
$(arr).each((index, item) => {
    $.get(item.url, (data) => {
      $(".entry-body.hidden").removeClass('hidden');
          var get_title = $(data).find('.file-name').text(),
          get_version = $(data).find('.version').text(),
          get_mod = $(data).find('.mod-features').text();
        $(item.elements).each((i, ele) => {
            ele.title.html(get_title);
            ele.version.html(get_version);
            ele.mod.html(get_mod);
        });
    });
});
#14

oke anh. edit .each(() => { thành .each(function() { thì oke rồi a ạ. hết trùng rồi ^^

#15

em hỏi cái này nữa a :3 e muốn truyền nó vào trong success của ajax khác thì làm như nào a. nếu chèn nó vào trong ajax đó thì nó sẽ bị lặp lại. e dùng scroll là để cho ajax chạy xong mới thực thi cái gán info kia

#16

Chưa hiểu ý của bạn.

#17

là như này ạ cái .block-posts .grid-item là nó em tạo bằng feeds của blog. nếu em bỏ code get info này ra ngoài thì nó không thêm được cho .block-posts .grid-item còn nếu em bỏ nó vào trong ajax thì nó lại bị dính vòng lập.
link blog cho e dễ hiểu ạ. em cũng ko biết nói sao @@

83% thành viên diễn đàn không hỏi bài tập, còn bạn thì sao?