How to filter elements from an array until specific string

Question

I'm trying to filter out elements from an array until a specific string, which in this case are day names (Mon, Tue, Wed etc.) which I get with this variable:

var day = new Date(reservation.startDate);

I have an array of elements and I'm using the the push() method to add them inside the array.

Here is the array:

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>"        
]

If I want to print out the data that only contains "Mon", I use:

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

But if I use the same method on wednesday for example, I get the data from monday, tuesday and up until wednesday, which is not ideal since I only want the data from wednesday.

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

So is there an effective way to pick data from the middle of the array and not include other days?

I have to use core JavaScript, so any frameworks can't be used.

To clarify

I need to print the data from each day into their own innerHTML sections.

So I would need this data for ("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>"

Note that the data changes from day to day, so should I just filter out the other days and it's data from the array I don't want to include in the innerHTML?

What is the actual format of your arrayData? It's not clear from your example. Is each line that you printed out one element, and the commas are part of that element's text? Or are the elements separated by commas and the newlines aren't significant - in other words each line in your printout is three or sometimes four consecutive array elements? If it's the latter, this seems like an awfully awkward data format to work with. Do you have the option of changing this format to be easier to use? — Michael Geary
– Michael Geary, Commented Aug 20, 2017 at 14:46
And you are stuck with this format and can't change it? It's a real mess! I take it the rows in your printout represent logical groupings of the array elements, where you want to select one of these groups and do something depending on the first item in the row? How do you decide where the groups begin and end? Some have three elements in the group, some have four. Some of your elements that contain the day names have   at the end, others don't. And in a couple of cases, the last element in a group is missing its  closing tag. Your first step has to be to clean up this data. — Michael Geary
– Michael Geary, Commented Aug 20, 2017 at 15:07
BTW for future reference (in fact I recommend editing your question with this), it would be much better to do console.log( JSON.stringify(arrayData,null,4) ) to get an unambiguous representation of your data so people aren't confused about its actual format. — Michael Geary
– Michael Geary, Commented Aug 20, 2017 at 15:14
@MichaelGeary Thank you for the info. I agree it's a real mess but unfortunately this is what I have to work with — IlariM
– IlariM, Commented Aug 20, 2017 at 16:02

quirimmo · Accepted Answer · 2017-08-20 16:04:27Z

1

Simply use the array filter function and concatenate conditions if I got what you need and pass "your day".

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(''));

EDITED

I understood now that your data is really bad arranged and you have a lot of elements, not grouped by row as you shown in the console, so here a version in order to rearrange your data and then perform your operations:

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(''));

edited Aug 20, 2017 at 16:04

answered Aug 20, 2017 at 14:33

quirimmo

10k3 gold badges33 silver badges46 bronze badges

Sign up to request clarification or add additional context in comments.

10 Comments

IlariM Over a year ago

So basically I want data from each day inside their own innerHTML for example for thursday I could use document.getElementById("Thursday").innerHTML = array.filter(filtering.bind(null, 'Thu')); ?

IlariM Over a year ago

This is working well on the part that I get the day name into each innerHTML but is it possible to get the other data aswell along with the day name for example for monday: Mon,AUT14,KL25AB55200-3001

quirimmo Over a year ago

Hi @IlariM, for the first question yes. The second question I am sorry I didn't understand what you mean. Could you explain me it better please?

Michael Geary Over a year ago

@quirimmo The data format you're using is not the same as the data format the OP has. See the comment discussion under the question. Each of those commas delimits a separate array element! What a mess.

IlariM Over a year ago

@quirimmo Updated in the question

|

Andy · Accepted Answer · 2017-08-20 15:53:34Z

If you add a class and a data attribute to the elements it might be easier:

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>

You can then pick up all the elements at once with document.querySelectorAll:

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

And then iterate over each element, taking the data-name attribute as an id, checking it against the substring of the array elements, filtering out on those where it matches, and then adding hat HTML to the element.

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 - remember you have   in your array HTML strings which is why the output is a little wonky.

EDIT

Working with your data I came up with a solution to get some sort of decent output. I'll leave it here in case it looks useful:

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}`;
});

And you end with this:

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

Collectives™ on Stack Overflow

How to filter elements from an array until specific string

2 Answers 2

10 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

10 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related