Saya mencoba memfilter elemen dari array hingga string tertentu, yang dalam hal ini adalah nama hari (Sen, Sel, Rab, dll.) yang saya dapatkan dengan variabel ini:

var day = new Date(reservation.startDate);

Saya memiliki array elemen dan saya menggunakan metode push() untuk menambahkannya ke dalam array.

Berikut adalah arraynya:

console.log(JSON.stringify(arrayData, null, 4))

[
    "<b>Mon</b>",
    "<b>AUT14</b>",
    "<b>KL25AB55200-3001</b>",
    "<b>Mon</b>",
    "<b>AUT15</b>",
    "<b>KC23DK20010-3003</b>",
    "<b>Tue</b>",
    "<b>TI14</b>",
    "<b>KL04BT10110-3001</b>",
    "<b>Tue</b>",
    "<b>AUT15</b>",
    "<b>KL25AB10451-3001</b>",
    "<b>Tue</b>",
    "<b>AUT13</b>",
    "<b>AUT13</b>",
    "<b>KL25AD10000-14</b>",
    "<b>Tue</b>",
    "<b>ASR14</b>",
    "<b>Wed</b>",
    "<b>TI14</b>",
    "<b>IPS16</b>",
    "<b>A800BD65-3001</b>",
    "<b>Wed</b>",
    "<b>TI14</b>",
    "<b>KL04BT10110-3001</b>",
    "<b>Wed</b>",
    "<b>AUT15</b>",
    "<b>KL25AB55200-3002</b>",
    "<b>Thu</b>",
    "<b>AUT16</b>",
    "<b>KL25AB10250-3001</b>",
    "<b>Thu</b>",
    "<b>TI14</b>",
    "<b>IPS16</b>",
    "<b>A800BD65-3001</b>",
    "<b>Thu</b>",
    "<b>TI13</b>",
    "<b>TI14</b>",
    "<b>KL25AB10300-3001</b>"        
]

Jika saya ingin mencetak data yang hanya berisi "Senin", saya menggunakan:

if (day.toString().indexOf("Mon") >= 0) {                             
    document.getElementById("Monday").innerHTML = arrayData.join("");
}

Tetapi jika saya menggunakan metode yang sama pada hari rabu misalnya, saya mendapatkan data dari senin, selasa dan hingga rabu, yang tidak ideal karena saya hanya ingin data dari Rabu.

if (day.toString().indexOf("Wed") >= 0) {                                                                     
    document.getElementById("Wednesday").innerHTML = arrayData.join("");
}

Jadi apakah ada cara yang efektif untuk mengambil data dari tengah array dan tidak memasukkan hari lain?

Saya harus menggunakan inti JavaScript, jadi kerangka kerja apa pun tidak dapat digunakan.

Untuk memperjelas

Saya perlu mencetak data dari setiap hari ke bagian innerHTML mereka sendiri.

Jadi saya membutuhkan data ini untuk ("Monday").innerHTML :

"<b>Mon</b>",
"<b>AUT14</b>",
"<b>KL25AB55200-3001</b>",
"<b>Mon</b>",
"<b>AUT15</b>",
"<b>KC23DK20010-3003</b>",

("Tuesday").innerHTML:

"<b>Tue</b>",
"<b>TI14</b>",
"<b>KL04BT10110-3001</b>",
"<b>Tue</b>",
"<b>AUT15</b>",
"<b>KL25AB10451-3001</b>",
"<b>Tue</b>",
"<b>AUT13</b>",
"<b>AUT13</b>",
"<b>KL25AD10000-14</b>",
"<b>Tue</b>",
"<b>ASR14</b>",

("Wednesday").innerHTML:

"<b>Wed</b>",
"<b>TI14</b>",
"<b>KL04BT10110-3001</b>",
"<b>Wed</b>",
"<b>AUT15</b>",
"<b>KL25AB55200-3002</b>",

("Thursday").innerHTML:

"<b>Thu</b>",
"<b>AUT16</b>",
"<b>KL25AB10250-3001</b>",
"<b>Thu</b>",
"<b>TI14</b>",
"<b>IPS16</b>",
"<b>A800BD65-3001</b>",
"<b>Thu</b>",
"<b>TI13</b>",
"<b>TI14</b>",
"<b>KL25AB10300-3001</b>"

Perhatikan bahwa data berubah dari hari ke hari, jadi haruskah saya memfilter hari-hari lain dan datanya dari larik yang tidak ingin saya sertakan dalam innerHTML?

0
IlariM 20 Agustus 2017, 17:25

2 jawaban

Jawaban Terbaik

Cukup gunakan fungsi filter array dan gabungkan kondisi jika saya mendapatkan apa yang Anda butuhkan dan melewati "hari Anda".

var array = [
'<b>Mon</b>,<b>AUT14</b>,<b>KL25AB55200-3001</b>',
'<b>Mon</b>,<b>AUT15</b>,<b>KC23DK20010-3003</b>',
'<b>Tue</b>,<b>TI14</b>,<b>KL04BT10110-3001</b>',
'<b>Tue</b>,<b>AUT15</b>,<b>KL25AB10451-3001</b>',
'<b>Tue</b>,<b>AUT13</b>,<b>AUT14</b>,<b>KL25AD10000-14',
'<b>Wed</b>,<b>TI14</b>,<b>IPS16</b>,<b>A800BD65-3001',
'<b>Wed</b>,<b>TIT14</b>,<b>KL04BT10110-3001</b>',
'<b>Thu</b><br/>,<b>AUT16</b>,<b>KL25AB10250-3001</b>',
'<b>Thu</b><br/>,<b>TI14</b>,<b>KOR16</b>,<b>A800BD65-3001</b>'
];
function filtering(day, el) {
  return el.includes('<b>'+day+'</b>');
}
// printing all Thu
console.log(array.filter(filtering.bind(null, 'Thu')).join(''));
// printing all Wed
console.log(array.filter(filtering.bind(null, 'Wed')).join(''));

DIEDIT

Saya mengerti sekarang bahwa data Anda sangat buruk diatur dan Anda memiliki banyak elemen, tidak dikelompokkan berdasarkan baris seperti yang Anda tunjukkan di konsol, jadi di sini ada versi untuk mengatur ulang data Anda dan kemudian melakukan operasi Anda:

var list = [
'<b>Mon</b>','<b>AUT14</b>','<b>KL25AB55200-3001</b>',
'<b>Mon</b>','<b>AUT15</b>','<b>KC23DK20010-3003</b>',
'<b>Tue</b>','<b>TI14</b>','<b>KL04BT10110-3001</b>',
'<b>Tue</b>','<b>AUT15</b>','<b>KL25AB10451-3001</b>',
'<b>Tue</b>','<b>AUT13</b>','<b>AUT14</b>','<b>KL25AD10000-14',
'<b>Wed</b>','<b>TI14</b>','<b>IPS16</b>','<b>A800BD65-3001',
'<b>Wed</b>','<b>TIT14</b>','<b>KL04BT10110-3001</b>',
'<b>Thu</b><br/>','<b>AUT16</b>','<b>KL25AB10250-3001</b>',
'<b>Thu</b><br/>','<b>TI14</b>','<b>KOR16</b>','<b>A800BD65-3001</b>'
];
const keywords = ['Mon', 'Tue', 'Wed', 'Thu', 'Fri'];
// starting data
// console.log(list);
//first reduce your array to a better data format
var orderedList = list.reduce(function(accumulator, currentValue, currentIndex, array) {
  if (keywords.filter(el => currentValue.indexOf(el) > -1).length > 0) {
     accumulator.push(currentValue);
  }
  else {
     accumulator[accumulator.length - 1] += currentValue;
  }
  return accumulator;
}, []);
// here the ordered data
// console.log(orderedList);

function filtering(day, el) {
  return el.includes('<b>'+day+'</b>');
}
// printing all Thu
console.log(orderedList.filter(filtering.bind(null, 'Thu')).join(''));
// printing all Wed
console.log(orderedList.filter(filtering.bind(null, 'Wed')).join(''));
1
quirimmo 20 Agustus 2017, 16:04

Jika Anda menambahkan kelas dan atribut data ke elemen, mungkin akan lebih mudah:

HTML

<div class="day" data-name="Monday"></div>
<div class="day" data-name="Tuesday"></div>
<div class="day" data-name="Wednesday"></div>
<div class="day" data-name="Thursday"></div>

Anda kemudian dapat mengambil semua elemen sekaligus dengan document.querySelectorAll:

var days = document.querySelectorAll('.day');

Dan kemudian ulangi setiap elemen, dengan mengambil atribut data-name sebagai id, memeriksanya terhadap substring elemen larik, memfilter yang cocok, lalu menambahkan HTML topi ke elemen.

days.forEach(day => {
  const id = day.getAttribute('data-name').substr(0, 3);

  // Remember that in a couple of cases the filter is going to
  // return an array of two or more elements (Tuesday for example)
  // so you need to `join` those elements up
  const html = array.filter(str => str.substr(3, 3) === id).join('');
  day.innerHTML = html;
});

DEMO - ingat Anda memiliki <br/> di HTML array Anda string itulah sebabnya outputnya sedikit miring.

EDIT

Bekerja dengan data Anda, saya menemukan solusi untuk mendapatkan semacam hasil yang layak. Saya akan meninggalkannya di sini jika itu terlihat berguna:

document.querySelectorAll('.day').forEach(day => {

  // Get the day name and the id (short day name)
  const label = day.getAttribute('data-name');
  const id = label.substr(0, 3);

  // Grab the relevant HTML
  const htmlArr = array.filter(str => str.substr(3, 3) === id);

  // Iterate over the filtered HTML array
  const rows = htmlArr.map(el => {

    // Split the HTML row into components
    const html = el.split(',');

    // Extract what I've called the ID and the CODE
    const id = html[1].match(/>([A-Z0-9]*)</)[1];
    const code = html[2].substr(3, 16);

    // Return that information as HTML in a template
    return `<span>${id} | ${code}</span>`;

  // For each row in the filter array, join the the returned HTML
  // with a <br/>
  }).join('<br/>');

  // Finally, use our label, and add the rows
  day.innerHTML = `<b>${label}</b><br/>${rows}`;
});

Dan Anda berakhir dengan ini:

Monday
AUT14 | KL25AB55200-3001
AUT15 | KC23DK20010-3003

Tuesday
TI14 | KL04BT10110-3001
AUT15 | KL25AB10451-3001
AUT13 | AUT14

Wednesday
TI14 | IPS16
TIT14 | KL04BT10110-3001

Thursday
AUT16 | KL25AB10250-3001
TI14 | KOR16

DEMO

1
Andy 20 Agustus 2017, 15:53