Sniberb•2w ago

snowberb – 13-45 Mar 27

I have an array of objects which consists of information about the properties of a building. This array can have just 4 or more than 500 properties depending on the apartment complex. Based on this array, and the information of each property, I have to render some inputs which are Block, Stair, Floor and Door. In that said order, I have to populate the next input only with the matching data based on what the user selected. For example, if the Block 3 only has stairs E, F, G, only these options are going to show up in the Stairs input. And its the same for the next ones, if the Stair E has only floors 5 and 6, only these will show up on the Floor input. The problem im facing with my code now, is that Blocks, Stairs and Floors are optional and may not be available. I do not know how I can rearrange my code so that if the property "block" or "stair" or "floor" is missing, the filter automatically works with the next available piece of information. This is what I have:

    const blocks = [...new Set(properties.map(({ block }) => block))].map(block => ({ id: block, value: block, label: block }));
    const stairs = [...new Set(properties.filter(({ block }) => block === selectedBlock).map(({ stair }) => stair))].map(stair => ({
        id: stair,
        value: stair,
        label: stair,
    }));
    const floors = [
        ...new Set(properties.filter(({ block, stair }) => block === selectedBlock && stair === selectedStair).map(({ floor }) => floor)),
    ].map(floor => ({ id: floor, value: floor, label: floor }));
    const doors = [
        ...new Set(
            properties
                .filter(({ block, stair, floor }) => block === selectedBlock && stair === selectedStair && floor === selectedFloor)
                .map(({ door }) => door),
        ),
    ].map(door => ({ id: door, value: door, label: door }));

    const blocks = [...new Set(properties.map(({ block }) => block))].map(block => ({ id: block, value: block, label: block }));
    const stairs = [...new Set(properties.filter(({ block }) => block === selectedBlock).map(({ stair }) => stair))].map(stair => ({
        id: stair,
        value: stair,
        label: stair,
    }));
    const floors = [
        ...new Set(properties.filter(({ block, stair }) => block === selectedBlock && stair === selectedStair).map(({ floor }) => floor)),
    ].map(floor => ({ id: floor, value: floor, label: floor }));
    const doors = [
        ...new Set(
            properties
                .filter(({ block, stair, floor }) => block === selectedBlock && stair === selectedStair && floor === selectedFloor)
                .map(({ door }) => door),
        ),
    ].map(door => ({ id: door, value: door, label: door }));

19 Replies

SniberbOP•2w ago

The objects look like this:

{
    "stair": "3",
    "floor": "1",
    "door": "A",
    "entrance": "",
    "block": "2"
}

{
    "stair": "3",
    "floor": "1",
    "door": "A",
    "entrance": "",
    "block": "2"
}

ortunado•2w ago

How does the filtering look like? You can select any block, stair, floors?

SniberbOP•2w ago

At first, only the Block input is allowed, and you can select any block available from the array. Then they will stop being disabled in order You can select any block as its the first input you use, but then you can only select the Stairs that are available for that block Do you need me to explain something further?

ortunado•2w ago

Alright. What exactly are you having issue with?

SniberbOP•2w ago

That if any of the props are missing, the code will stop working as im using direct comparisons on the .filter() A building may not have any blocks, and just floors and stairs

ortunado•2w ago

At first, only the Block input is allowed.

This basically, invalidates what you have said.

SniberbOP•2w ago

In this order: Block, Stair, Floor, Door; the user is allowed to select any option. If there are no Blocks, then the frist input starts at Stair, if there are no Stairs but there are blocks, then it goes as Block, Floor, Door: More examples: - Block, Stair, Floor, Door - Stair, Floor, Door - Floor Door - Block, Floor, Door

ortunado•2w ago

const filtered = arr.filter((unit) => {
  return (
    (!selectedBlock || unit.block === selectedBlock) &&
    (!selectedStairs || unit.stair === selectedStairs) &&
    (!selectedDoor || unit.door === selectedDoor)
  );
});

const filtered = arr.filter((unit) => {
  return (
    (!selectedBlock || unit.block === selectedBlock) &&
    (!selectedStairs || unit.stair === selectedStairs) &&
    (!selectedDoor || unit.door === selectedDoor)
  );
});

floor add yourself this should handle that the value is not there keeping your order of - Block, Stair, Floor, Door

SniberbOP•2w ago

how do you use that tho it all goes back to one array I dont get how it separates the available Stairs for the selected block for example

ortunado•2w ago

const stairs = [...new Set(filtered.map(({ stair }) => stair))]

const stairs = [...new Set(filtered.map(({ stair }) => stair))]

You can as well, use reduce to only have single iteration.

SniberbOP•7d ago

Im checking it, thanks for the help btw, really appreciated Tried this and it works! It does filter everything with what's available, but if you want to change any input, it only shows the selected option

SniberbOP•7d ago

SniberbOP•7d ago

I selected the 2nd floor, and then all the other options dissappear

ortunado•7d ago

That means you have selectedBlock, selectedDoor still something else than falsy

SniberbOP•7d ago

The door selector shows the correct options for the 2nd floor

SniberbOP•7d ago

But again, once you select it, the rest of the options disappear

ortunado•7d ago

Well, that's expected. You need to adjust the logic then, to take in account the previous condition e.g floor for door. Basically, when you have selectedFloor, do not take in account selectedDoor for the options. You can use || instead for some of those conditions. You could even do reduce and just build the options within there.

SniberbOP•7d ago

thanks for the guidance

export const getFilteredOptions = (level, selections, availableLevels, properties) => {
    const index = availableLevels.indexOf(level);
    const filters = availableLevels.slice(0, index);

    const filteredLevels = properties.filter(property =>
        filters.every(filter => !selections[filter] || property[filter] === selections[filter]),
    );

    const uniqueOptions = [...new Set(filteredLevels.map(property => property[level]))];

    return mapForSelect(uniqueOptions);
};

export const getFilteredOptions = (level, selections, availableLevels, properties) => {
    const index = availableLevels.indexOf(level);
    const filters = availableLevels.slice(0, index);

    const filteredLevels = properties.filter(property =>
        filters.every(filter => !selections[filter] || property[filter] === selections[filter]),
    );

    const uniqueOptions = [...new Set(filteredLevels.map(property => property[level]))];

    return mapForSelect(uniqueOptions);
};

    const availableLevels = ['entrance', 'block', 'stair', 'floor', 'door'].filter(level => properties.some(property => property[level]));

    const selections = {
        entrance: selectedEntrance,
        block: selectedBlock,
        stair: selectedStair,
        floor: selectedFloor,
    };
    const entrances = availableLevels.includes('entrance') ? getFilteredOptions('entrance', selections) : [];
    const blocks = availableLevels.includes('block') ? getFilteredOptions('block', selections) : [];
    const stairs = availableLevels.includes('stair') ? getFilteredOptions('stair', selections) : [];
    const floors = availableLevels.includes('floor') ? getFilteredOptions('floor', selections) : [];
    const doors = availableLevels.includes('door') ? getFilteredOptions('door', selections) : [];

    const availableLevels = ['entrance', 'block', 'stair', 'floor', 'door'].filter(level => properties.some(property => property[level]));

    const selections = {
        entrance: selectedEntrance,
        block: selectedBlock,
        stair: selectedStair,
        floor: selectedFloor,
    };
    const entrances = availableLevels.includes('entrance') ? getFilteredOptions('entrance', selections) : [];
    const blocks = availableLevels.includes('block') ? getFilteredOptions('block', selections) : [];
    const stairs = availableLevels.includes('stair') ? getFilteredOptions('stair', selections) : [];
    const floors = availableLevels.includes('floor') ? getFilteredOptions('floor', selections) : [];
    const doors = availableLevels.includes('door') ? getFilteredOptions('door', selections) : [];

I ended up doing this Works wonders!

reactibot•4d ago

This thread hasn’t had any activity in 72 hours, so it’s now locked. Threads are closed automatically after 72 hours. If you have a followup question, you may want to reply to this thread so other members know they're related. https://discord.com/channels/102860784329052160/565213527673929729/1354813585452433690

snowberb – 13-45 Mar 27

Did you find this page helpful?