Лучший способ зациклить массив объектов и отображать в HTML / DOM?

Question

Я только учусь, как правильно использовать DOM, и я борюсь с тем, как заставить мой javascript взаимодействовать с html. У меня есть массив объектов с информацией о кошках (только для того, чтобы помочь мне научиться), которые я хочу отображать с помощью HTML, и мне интересно, что лучше всего делать.

• Должен ли я поместить свои данные и файлы js в отдельный файл в html или просто записать его в теги сценария в html doc?
• Есть ли способ, которым я могу использовать литералы шаблонов в моем html для создания javascript таким образом, или все должно быть методом, подобным getelementbyid?

Любая помощь очень ценится. Спасибо!

Answer 1

Вы можете просто создать html div с идентификатором cats-info:

<div id="cats-info"></div>

тогда в вашем js-файле вы можете найти этот тег по id

const catsInfo = document.getElementById('cats-info');

тогда вы можете создать список кошек:

const catsData = [
    {name: 'puffy', color: 'black'},
    {name: 'flipper', color: 'white'}
];

function createCatList(cats) {
    return `
       <ul>
           cats.map(cat => convertToCatItem(cat))
       </ul>
`;
}

function convertToCatItem(cat) {
 return `<li>${cat.name} - ${cat.color}</li>`;
}

и поместите свой список в свой блок catsInfo;

catsInfo.innerHTML = createCatList(catsData);

Не стесняйтесь спрашивать

Answer 2

У вас есть много вариантов.

1. Вы можете использовать шаблоны jquery для привязки данных к HTML. Данные будут в javascript, и вы можете иметь заполнители для отображения этих данных.
2. Вы можете использовать Jquery для управления DOM и размещения данных внутри элементов HTML.
3. Вы можете использовать некоторые из структур javascript, например KnockoutJ, для динамического связывания данных из данных javascript с HTML

Выбор действительно зависит от вашего варианта использования. Если вам просто нужно отобразить информацию только для чтения, шаблоны jquery должны подойти. Использование Jquery, пожалуй, проще всего начать, но в долгосрочной перспективе оно беспорядочно и нереализуемо. Если вам нужно реализовать много динамического поведения, управляемого данными, используйте фреймворки javascript.