Порядок структуры массива на основе элемента в массиве имеет определенное значение, установленное в true

Question

У меня есть входящие данные от моей CMS, которые все содержат значение featuredProject, это может быть истина, нуль или ложь. Если это правда, я добавляю класс css, который заставляет его охватывать весь экран. Чтобы сохранить структуру сетки нетронутой, мне нужно всегда иметь как минимум два проекта с featuredProject, установленными в false или null, до или после проекта с featuredProject, установленным в true.

Проблема в том, что данные от CMS не уважает предполагаемый дизайн сетки и может и, вероятно, выйдет искаженным из того, что мне нужно, чтобы я oop правильно его вывел.

То, что я пытался достичь сейчас, это функция, которая перебирает все проекты в массиве из CMS и просматривает значение featuredProject текущего проекта в l oop. Если установлено значение true, я оглядываюсь на последние 2 индекса массива, чтобы увидеть их значение featuredProject. Если для них обоих не установлено значение false или ноль, я хочу отсортировать массив, сдвинув текущий индекс на один шаг вперед, выйдя из l oop, а затем из него снова l oop, чтобы проверить, все ли значения расположены по порядку.

Прямо сейчас я получаю сообщение об ошибке, в котором одно значение массива равно undefined, чего я на самом деле не понимаю, почему.

Изображение, отображающее сетку, которую я хотел бы достигать. https://imgur.com/a/KrdwlNI

Код, который у меня есть прямо сейчас.

Функция для перемещения индекса

function move(array: any[], from: number, to: number) {
    if (to === from) return array

    const target = array[from]
    const increment = to < from ? -1 : 1

    for (let k = from; k != to; k += increment) {
        array[k] = array[k + increment]
    }
    array[to] = target
    return array
}

Функция, которая проверяет значение featuredProject

const sortImageGrid = (arr: any[]): any[] => {
    // console.log(arr)

    const sortedArr: any[] = []
    arr.map((item, index) => {
        if (item === undefined) {
            return
        }
        // console.log(item)
        if (index === 0) {
            sortedArr.push(item)
        } else if (index === 1 && item.featuredProject) {
            move(arr, index, index + 1)
        } else if (index === 1 && !item.featuredProject) {
            sortedArr.push(item)
        } else if (
            item.featuredProject &&
            !arr[index - 1].featuredProject &&
            !arr[index - 2].featuredProject
        ) {
            sortedArr.push(item)
        } else if (
            (item.featuredProject && arr[index - 1].featuredProject === true) ||
            (item.featuredProject && arr[index - 2].featuredProject === true)
        ) {
            move(arr, index, index + 1)
        } else {
            sortedArr.push(item)
        }
        console.log(sortedArr)
    })
    if (sortedArr.length === arr.length) {
        return sortedArr
    } else {
        return []
    }
}

Как запустить функцию в компоненте, где я планирую проекты

    const [gridSorted, setGridSorted] = useState(false)
    let sortedArr: any[] = []

    if (data.allSanityProject.nodes && data.allSanityProject.nodes.length > 0) {
        while (gridSorted === false) {
            sortedArr = sortImageGrid(data.allSanityProject.nodes)
            // console.log(sortedArr)
            if (sortedArr.length === data.allSanityProject.nodes.length) {
                setGridSorted(true)
                return
            }
        }
    }

Answer 1

Думаю, вы могли бы сделать это одним способом - отфильтровать ответы в отдельные массивы:

let falsyValues = [];
let truthyValues = []
for(let item of arr){
    if(item.featuredProject){
        truthyValues.push(item)
    } else {
        falsyValues.push(item)
    }
}

Затем создайте функцию, которая "упаковывает" их по вашим критериям:

function zip(falsyArr, truthyArr){
    let zippedValues = []
    for(let i = 0, n = 0; i < falsyArr.length; i++, n += 2){
        if(!falsyArr[n] || !falsyArr[n+1]){
            return zippedValues
        }
        zippedValues.push(falsyArr[n], falsyArry[n+1], truthyArr[i])
    }
    return zippedValues;
}

Вам просто нужно немного настроить функцию zip, чтобы учесть массивы с различной длиной и определить, какой из них вы хотите увеличить на l oop (возможно, максимальную длину между ними). ​​