2

Коллеги, на сайте есть страницы.

введите сюда описание изображения

Не важно какая функция, но есть функция, которая считывает наличие страниц и возвращает массив (этих самых страниц), и в соответствии из данных которого я уже создаю объект с нужными мне данными.

let _getPages = [];

pages.forEach((s, i, arr) => {
    _getPages[i] = {
        href: s.split('/')[2].split('.')[0].capitalize(),
        link: s
    }
})

Получаю такое:

{href: "About_us", link: "frontend/pages/about_us/index.html"}
{href: "Contact", link: "frontend/pages/contact/index.html"}
{href: "Main", link: "frontend/pages/main/index.html"}
{href: "Slider", link: "frontend/pages/slider/index.html"}

Далее, имея все это я создаю Меню на странице

const li = document.createElement('li');
const menu = document.querySelector('menu');


_getPages.forEach((s, i, arr)=>{
    let listPage = li.cloneNode(true);
    listPage.classList.add('listPage');
    listPage.innerHTML = s.href
    menu.appendChild(listPage);
})

И в итоге, что у меня есть

введите сюда описание изображения

В итоге, не могу сообразить, как именно и на каком уровне с сортировать так, чтобы я получил меню С той последовательностью страниц которую хочу.

Допустим, чтобы Main, был на первом месте, About_us, на последнем....

P.S. Первое что пришло в голову, это добавить в название папок буквы a, b, c, d....., а потом их срезать, но не думаю, что это профессиональный подход

Вопрос немного глуповат, но не соображу ни как.

Не прошу готовы пример, мне нужна лишь подсказка.

Так как и на каком уровне отсортировать массив?

10
  • Мне кажется проблема в том, что мы изначально не знаем как сортировать.... То есть у нас есть некий список меню, который отсортирован по алфавиту.... Но откуда js знать, как расположить элементы? В текущим случаи я вижу, что нужна сортировка массива на основе другого массива. То есть где-то заранее объявить массив меню с нужным порядок..... Но мне кажется, что в вашем случаи может не подойти. Пример сортировка массива по другому массиву тут stackoverflow.com/questions/13304543/… 31 янв 2019 в 7:25
  • 1
    С той последовательностью страниц которую хочу. - а как ты определяешь с какой хочешь?
    – Grundy
    31 янв 2019 в 7:26
  • @AlexanderSemikashev, ты не знаешь отсортирован ли полученный список
    – Grundy
    31 янв 2019 в 7:26
  • @Grundy, в том то и дело что не знаю как определить.
    – Air
    31 янв 2019 в 7:27
  • @AlexanderSemikashev. естественно JS не может знать как расположить, пока я ему не опишу логику. А чтобы была логика, я не могу сообразить из каких исходных данных описать логику для js.
    – Air
    31 янв 2019 в 7:33

2 ответа 2

1

Для начала, следует признать, что порядок - не единственная информация которую вам не удалось получить. Ещё вам нужны нормальные заголовки ("About us" пишется без подчёркивания!), перевод их на другие языки, цвет...

Проще всего - не играться с автоматическим определением страниц сайта, а записать всё меню в отдельный файл.

Если же такой вариант не устраивает по каким-то причинам (например, из-за раздельного деплоя) - нужно добавить файл с описанием к каждой странице. Пусть у вас будут файлы pages/about_us/info.json, pages/contact/info.json и т.п. Дальше можно завести для каждой страницы атрибут order и сортировать по нему.

Как вариант, всю необходимую информацию можно попытаться добавить в мета-тэги. Но тут вам понадобится уже парсер html чтобы её прочитать.

4
  • Pavel, что касается заголовков, это пока не важно, я прекрасно знаю как пишется About us... Я не прав в том, что несколько не глубоко вопрос описал. Тот изначальный массив который я получаю, это работа webpack в ответе ru.stackoverflow.com/questions/936622/… есть пример того, как я получаю массив. Мне не хочется в ручную описывать все это. Я как только создаю некую папку с новой страницей, у меня динамический перезаписывается массив и я получаю список страниц
    – Air
    31 янв 2019 в 8:38
  • @Air я понял что это работа webpack. Но зачем вам использовать то решение для жалкой менюшки на 4 пункта? А если надо позарез - положите json рядом с каждой страницей. 31 янв 2019 в 8:40
  • Pavel, я согласен на все сто с этим высказыванием ...для жалкой менюшки на 4 пункта.... Но тут есть несколько глубокий смысл. Я пока еще учусь. Я умею многое, но это моя первая самостоятельная сборка всего frontend backend, webpack... Так что, это может быть не обязательно меню, данный пример я могу использовать в чем то другом. По этому каждый ответ мне интересен и важен. Есть о чем подумать... В любом случае благодарю за ответ
    – Air
    31 янв 2019 в 8:52
  • отдельный order в каждом файле надо как-то синхронизировать будет
    – Grundy
    31 янв 2019 в 9:06
0

const menuIWant = ["Main","Contact","Slider", "About_us" ];
let _getPages = [
  {href: "About_us", link: "frontend/pages/about_us/index.html"},
  {href: "Contact", link: "frontend/pages/contact/index.html"},
  {href: "Main", link: "frontend/pages/main/index.html"},
  {href: "Slider", link: "frontend/pages/slider/index.html"},
];

const result = [];

menuIWant.forEach(item => {
  for (let i=0; i<_getPages.length; i++){
    if (_getPages[i].href === item) {
       result.push(_getPages[i]);
       break;
      }
    }
})
console.log(result)

6
  • Минус не мой. Я и не собирался ставить, но это не то. У меня этот массив создается динамический. Когда я создаю новую папку, то webpack мне все перебирает, с данным примером, мне придется лазать в код и добавлять в список const menuIWant = ["Main","Contact","Slider", "About_us" ]; новое значение в ручную
    – Air
    31 янв 2019 в 7:52
  • Что бы получить, что хочешь - нужно знать, что хочешь). В любом случае, эту информацию нужно будет где-то хранить. Если Вы добавите какой-нибудь индекс к названию файлов, то потом, если захотите изменить меню, прийдется переименовывать все файлы. С массивом будет проще
    – Dmytro
    31 янв 2019 в 7:55
  • Дмытрык, по моему ты щас меня сравнил с беременной блондинкой, которая не знает чего хочет... То ли арбуз с цементом, то ли мармелад с опилками...))))
    – Air
    31 янв 2019 в 8:00
  • 1
    Зачем делать forEach и push когда существует map? 31 янв 2019 в 8:20
  • 1
    @PavelMayorov, все зависит от опыта. Для меня, такая реализация более очевидна. Спасибо, за codereview)
    – Dmytro
    31 янв 2019 в 8:28

Ваш ответ

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими условиями использования и подтверждаете, что прочитали и поняли наши политику конфиденциальности и нормы поведения.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.