Question 306950 in Javascript Question posted in
A very good W3school tutorial can be found here.

Javascript – How do I use the an array of keys as a filter to sanitize an array of objects?

I have an array of objects that I call daysArray. This array represents 2 days as illustrated below:

console.log(daysArray)

Which logs out:

(2) [{…}, {…}]

…revealing an array of objects. When further expanded it reveals:

(2) [{…}, {…}]
   0: {Wednesdays: Array(4)}
   1: {Fridays: Array(4)}

…it reveals that the objects are two days. Lets further expand:

0: 
   Wednesdays: Array(4)
      0: {T_04:00_Start: 1703034000, T_08:00_End: 1703048400}
      1: {T_12:00_Start: 1703062800, T_16:00_End: 1703077200}
      2: {T_16:00_Start: 1703077200, T_20:00_End: 1703091600}
      3: {T_20:00_Start: 1703091600, T_00:00_End: 1703106000}
1: 
   Fridays: Array(4)
      0: {T_04:00_Start: 1703206800, T_08:00_End: 1703221200}
      1: {T_12:00_Start: 1703235600, T_16:00_End: 1703250000}
      2: {T_16:00_Start: 1703250000, T_20:00_End: 1703264400}
      3: {T_20:00_Start: 1703264400, T_00:00_End: 1703278800}

…it reveals that each day holds 4 time ranges. Each time range has a start time KEY and a timestamp associated to it and an end time KEY and a timestamp associated to it.

Note that the time range KEYS for both days (Fridays and Wednesdays) are all the same.

  0: {T_04:00_Start: T_08:00_End:}
  1: {T_12:00_Start: T_16:00_End:}
  2: {T_16:00_Start: T_20:00_End:}
  3: {T_20:00_Start: T_00:00_End:}

The following code is supposed to add an additional day to the daysArray array called Tuesdays, and most importantly, make sure that it only holds the following time ranges to keep it uniformed to the days already existing in the daysArray array being Wednesday and Fridays.

In the code, it is supposed to use the time ranges values in the removedKeys array to filter out (remove) the unwanted time ranges.

Find below my code:

const elementToInsert = "Tuesdays";

// Check if "Tuesdays" is not already in daysArray before proceeding
if (!daysArray.some(obj => Object.keys(obj)[0] === elementToInsert)) {
// Extract time range keys from tempRemovedTimeRanges for Tuesdays
const removedKeys = [...new Set(tempRemovedTimeRanges.flatMap(Object.values).flat().flatMap(Object.keys))];

console.log(removedKeys);


// Iterate through tempRemovedTimeRanges and remove corresponding time ranges from Tuesdays
for (const removedRangeKey of removedKeys) {
  const dayObj = daysArray.find(obj => obj.hasOwnProperty(elementToInsert));
  if (dayObj) {
    const originalLength = dayObj[elementToInsert].length;

    dayObj[elementToInsert] = dayObj[elementToInsert].filter(existingRange =>
      !removedKeys.includes(removedRangeKey) ||
      !Object.entries(existingRange).some(([key, value]) =>
        removedRangeKey === key
      )
    );

    const removedCount = originalLength - dayObj[elementToInsert].length;

    console.log(`Removed ${removedCount} time ranges from ${elementToInsert}: `, removedRangeKey);
    console.log(`Updated ${elementToInsert}: `, dayObj[elementToInsert]);
  } else {
    console.log(`${elementToInsert} not found in daysArray.`);
  }
}



// Add "Tuesdays" along with its content back to daysArray
daysArray.push(...tempRemovedTuesdays);
console.log('Restored Tuesdays to daysArray: ', daysArray);

// Clear tempRemovedTuesdays after adding back to daysArray
tempRemovedTuesdays.length = 0;

// Check the everyday checkbox if all the checkboxes are checked!
if (daysArray.length === 7) {
  const checkbox = document.getElementById("_EverydayEveryDay");
  checkbox.checked = true;
  checkbox.disabled = true;
}
} else {
console.log(`${elementToInsert} is already in daysArray.`);
}

The following logs out:

(4) ['T_00:00_Start', 'T_04:00_End', 'T_08:00_Start', 'T_12:00_End']
Tuesdays not found in daysArray.
Restored Tuesdays to daysArray:  (3) [{…}, {…}, {…}]

Expanding on the daysArray reveals that Tuesdays was added:

(3) [{…}, {…}, {…}]
  0: {Wednesdays: Array(4)}
  1: {Fridays: Array(4)}
  2: {Tuesdays: Array(6)}

However that the time ranges aren’t uniformed. Lets further expand

Fridays: Array(4)
   0: {T_04:00_Start: 1703206800, T_08:00_End: 1703221200}
   1: {T_12:00_Start: 1703235600, T_16:00_End: 1703250000}
   2: {T_16:00_Start: 1703250000, T_20:00_End: 1703264400}
   3: {T_20:00_Start: 1703264400, T_00:00_End: 1703278800}

2: 
  Tuesdays: Array(6)
   0: {T_00:00_Start: 1702933200, T_04:00_End: 1702947600}
   1: {T_04:00_Start: 1702947600, T_08:00_End: 1702962000}
   2: {T_08:00_Start: 1702962000, T_12:00_End: 1702976400}
   3: {T_12:00_Start: 1702976400, T_16:00_End: 1702990800}
   4: {T_16:00_Start: 1702990800, T_20:00_End: 1703005200}
   5: {T_20:00_Start: 1703005200, T_00:00_End: 1703019600}

The desired out come for ‘Tuesdays’ should be:

  Tuesdays: Array(4)
   0: {T_04:00_Start: 1702947600, T_08:00_End: 1702962000}
   1: {T_12:00_Start: 1702976400, T_16:00_End: 1702990800}
   2: {T_16:00_Start: 1702990800, T_20:00_End: 1703005200}
   3: {T_20:00_Start: 1703005200, T_00:00_End: 1703019600}
Tags:

3

Answers


  1. 0

    The issue in your code seems to be in the way you’re filtering the time ranges for the "Tuesdays" object. Specifically, there appears to be a problem in the logic you’re using to remove the unwanted time ranges based on the removedKeys array. The filtering condition inside the filter method seems incorrectly formulated.

    Let’s break down the problem and rewrite the filtering part of your code to correctly remove the unwanted time ranges for "Tuesdays":

    1. Identify Unwanted Time Ranges: You are correctly identifying the keys to be removed using the removedKeys array.

    2. Filtering Time Ranges for Tuesdays: We need to filter out the time ranges from the "Tuesdays" object that are not required, based on the removedKeys array.

    Here’s a revised version of your code for the filtering part:

    // ... [previous code]

// Extract time range keys from tempRemovedTimeRanges for Tuesdays
const removedKeys = [...new Set(tempRemovedTimeRanges.flatMap(Object.values).flat().flatMap(Object.keys))];

console.log(removedKeys);

// Find the Tuesdays object, or create it if it doesn't exist
let dayObj = daysArray.find(obj => obj.hasOwnProperty(elementToInsert));
if (!dayObj) {
  dayObj = { [elementToInsert]: [] };
  daysArray.push(dayObj);
}

// Filter out the unwanted time ranges for Tuesdays
const allowedKeys = ['T_04:00_Start', 'T_08:00_End', 'T_12:00_Start', 'T_16:00_End', 'T_16:00_Start', 'T_20:00_End', 'T_20:00_Start', 'T_00:00_End'];
dayObj[elementToInsert] = dayObj[elementToInsert].filter(existingRange =>
  Object.keys(existingRange).every(key => allowedKeys.includes(key))
);

console.log(`Updated ${elementToInsert}: `, dayObj[elementToInsert]);

// ... [rest of your code]

    In this revised version:

    • The allowedKeys array is defined to list the keys that should be present in the "Tuesdays" time ranges.
    • The filtering logic checks if every key in the current time range (existingRange) is included in the allowedKeys list.
    • If a time range contains any key not in allowedKeys, it is filtered out.

    This should ensure that the "Tuesdays" object in your daysArray only contains the desired time ranges.

    Login or Signup to reply.
  2. 0

    You can just check the list of keys of the object against the list of valid keys

    const input = [
   {"T_00:00_Start": 1702933200, "T_04:00_End": 1702947600},
   {"T_04:00_Start": 1702947600, "T_08:00_End": 1702962000},
   {"T_08:00_Start": 1702962000, "T_12:00_End": 1702976400},
   {"T_12:00_Start": 1702976400, "T_16:00_End": 1702990800},
   {"T_16:00_Start": 1702990800, "T_20:00_End": 1703005200},
   {"T_20:00_Start": 1703005200, "T_00:00_End": 1703019600}
];

const validKeys = [
   "T_04:00_Start", "T_12:00_Start", "T_16:00_Start", "T_20:00_Start", "T_08:00_End", "T_16:00_End", "T_20:00_End", "T_00:00_End"
];

const result = input
  .filter((item) => Object.keys(item)
    .every((key) => validKeys.includes(key))
  );

console.log(result);
    Login or Signup to reply.
  3. 0

    Since your periods are stable you can filter them by the start date with a regexp in 1 line:

    const input = [
   {"T_00:00_Start": 1702933200, "T_04:00_End": 1702947600},
   {"T_04:00_Start": 1702947600, "T_08:00_End": 1702962000},
   {"T_08:00_Start": 1702962000, "T_12:00_End": 1702976400},
   {"T_12:00_Start": 1702976400, "T_16:00_End": 1702990800},
   {"T_16:00_Start": 1702990800, "T_20:00_End": 1703005200},
   {"T_20:00_Start": 1703005200, "T_00:00_End": 1703019600}
];

const result = input.filter(item => Object.keys(item)[0].match(/^T_(04|12|16|20)/));

console.log(result);
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search