получение дополнительных запятых при отображении через json и преобразование в html с использованием javascript - PullRequest
Новая
       7

получение дополнительных запятых при отображении через json и преобразование в html с использованием javascript

0 голосов
/ 25 августа 2018

Я делаю хобби-проект, чтобы сделать генератор сайтов, который читает json-файл, использует модуль узла fs-extra, а затем передает эти данные в функцию, которая создает html-файл с использованием литералов шаблона, но я продолжаю получать кучу запятых в мой HTML. Кто-нибудь знает, почему это происходит, или может помочь мне найти решение, чтобы это исправить?

запись файла с использованием пакета fs 

              <nav>
                ${
                    `<ul class='nav-list'>
                    ${navList.map(navItem =>{
                        return (`<li>
                            <a href="${
                                 navItem.folder+"/" + navItem.title +".html"
                            }">
                             ${navItem.navTitle}
                            </a>
                        <li>`)
                    })}
                    </ul>
                    `
                }
                </nav>

вот HTML-код, который выводится с дополнительной запятой - у меня есть еще один случай, в котором есть больше тегов с той же проблемой запятой (для простоты добавлен этот) ВЫВОД: 

<nav>
                <ul class='nav-list'>
                    <li>
                            <a href="./root/Index.html">
                             Home
                            </a>
                        <li>,<li>
                            <a href="./section1/Index2.html">
                             Section1
                            </a>
                        <li>
                    </ul>

                </nav>

Это то, что выводит мой терминал, когда я регистрирую navList чуть выше его отображения (после JSON.parse ()) 

[ { title: 'Index', folder: 'root', navTitle: 'Home' },

{title: 'Index2', папка: 'section1', navTitle: 'Section1'}]

Заранее спасибо (указанная выше строка не в блоке кода является частью блока кода)

1 Ответ

0 голосов
/ 25 августа 2018

Эти запятые происходят от неявного преобразования массива в строку.Если вам не нужны эти запятые, вам следует явно преобразовать массив в нужную вам строку (join (""))

Сделали бы вы это перед передачей в функцию?Или в шаблонном литерале как-то?

Я бы написал так: 

const renderNavItem = ({folder, title, navTitle}) => `<li>
  <a href="${folder}/${title}.html">${navTitle}</a>
<li>`;

const renderNav = (items) => `<nav>
  ${items.map(renderNavItem).join("\n")}
</nav>`;

Вы также можете написать небольшого помощника для решения этой проблемы: 

//"Rules" to convert any value into a string
const string = value => Array.isArray(value) ?
  value.map(string).join("") :
  value == null || value === false ?
  "" :
  String(value);

//a formatter that applies these "rules" to the values in a template string
const format = (strings, ...values) => strings.reduce((result, tpl, index) => result + string(values[index-1]) + tpl);

let example = format `here comes the Array: 
  <ul>${ [1,2,3,4,5].map(v => v&1? `<li>${v}</li>`: v*2) }</ul> 
  some more text ${1 < 2 && 'conditional text'} rest`;

console.log(example);
.as-console-wrapper{top:0;max-height:100%!important}

очевидно, вы не должны брать этот пример в качестве примера того, как создавать такие шаблоны, а скорее попробовать возможности, которые у вас есть со строками и тегами шаблонов.-функции

...