Как полностью создать HTML из объекта js?
Я работаю над поиском способа использования javascript для создания сообщений в блогах для моего сайта. Я неплохо разбираюсь в javascript, однако я не использовал многие элементы DOM, кроме document.getElementById(). Я ищу поддержку в том, как реализовать способ превратить объект JS в сообщение. Вот пример объекта:
var posts = { //My object
firstPost: { //An example post
index: 1, //Identifies order of posts: 1 is oldest... >1 newest
id: "first", //An id for the post
date: { //Date will be listed next to name on post
month: 11,
day: 2,
year: 2018
},
name: "My Post", //Name of the post
text: "Text for the post...", //Actual Post
image: 'blogImage.png' //An image for the post
}
И теперь я хочу передать его через функцию, как показано ниже, для создания HTML:
function assemblePost( index, id, month, day, year, text, image) {
//DOM GOES IN HERE
}
Вот пример того, как выглядит HTML, когда я набираю его вручную:
<div class = "card" id = "first"> <!-- Card element links to css -->
<h2>My Post</h2> <!-- Name of the post -->
<h5>Posted November 2nd, 2018</h5> <!-- Date of the post -->
<div class = "img" style = "height:200px;"><img src = "/blogImage.png" ></div>
<p>Text for the post..."</p> <!-- Actual Post -->
</div>
Я не совсем уверен, как подойти к этому, потому что:
- Класс «карта» ссылается на CSS, и я не уверен, как реализовать это с помощью DOM.
- Я не уверен, может ли DOM редактировать стиль, так как в этом примере высота изображения равна 200, но в другом изображении она может быть другой.
- Для многих других моих постов у меня может быть несколько абзацев и/или списков. По крайней мере, мне нужен был способ создать одну строку текста. Возможно, для списков массив был бы наиболее полезен в моем объекте, однако я не уверен, как обращаться к нескольким абзацам.
Я понимаю, что это много объяснений, примеров и рекомендаций, но я действительно ценю вашу помощь! Спасибо!
Проще и чище хранить дату в виде строки даты в формате ISO, а не в виде объекта с отдельными свойствами. Можно получить их, когда вы используете методы Date API и передаете строку iso
Также чаще используется массив объектов, где каждый элемент массива представляет собой один пост.
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 1
Просто делайте это шаг за шагом.
var posts = [ //My object (array of posts)
{ //An example post
index: 1, //Identifies order of posts: 1 is oldest... >1 newest
id: "first", //An id for the post
date: { //Date will be listed next to name on post
month: 11,
day: 2,
year: 2018
},
name: "My Post", //Name of the post
text: "Text for the post...", //Actual Post
image: 'blogImage.png' //An image for the post
},
{ //An example post
index: 2, //Identifies order of posts: 1 is oldest... >1 newest
id: "first", //An id for the post
date: { //Date will be listed next to name on post
month: 11,
day: 2,
year: 2018
},
name: "My another Post", //Name of the post
text: "Text for another post...", //Actual Post
image: 'blogImage.png' //An image for the post
}
];
const container = document.getElementById('div-posts');
posts.forEach(function(post) {
let div = document.createElement('div');
div.className = 'card';
div.id = 'post_' + post.index; //or post.id provided itis unique
//create more elements instead of ".innerHTML" if you wish
div.innerHTML = '<h2>' + post.name + '</h2>' +
'<h5>' + (new Date(post.date.year, post.date.month, post.date.day).toDateString()) + '</h5>' +
'<div class = "img"><img src = "/' + post.image + '" ></div>' +
'<p>' + post.text + '</p>';
container.appendChild(div);
});.card {
border: solid 1px #ccc;
width: 400px
}
.img img {
max-width: 100%
}<div id = "div-posts"></div>Спасибо! Это сработало прекрасно! Я понял, что это позволяет использовать только один абзац, поэтому я просто превратил переменную text из строки в массив, установив каждый элемент массива в строку каждого абзаца. Затем я вставил цикл for, чтобы добавлять каждый абзац по мере создания поста: for(n = 0; n < post.text.length; n +=1) { div.innerHTML += '<p>' + post.text[n] + '</p>'; }. Это дает больше гибкости в создании как можно большего или меньшего количества текста, как я хочу.
Есть ли способ использовать DOM для доступа к идентификатору после его передачи через функцию? Я пытался использовать document.getElementById();, чтобы получить к нему доступ, но это не сработало. Я пытаюсь использовать это для создания элемента холста в моем сообщении. Однако привязка контекста холста к тегу путем вставки "</p><canvas id='canvas'></canvas><p> перед моим текстом только создала элемент, но идентификатор не мог быть связан с ним. Я также попытался вставить его в функцию публикации, чтобы сделать тег холста всякий раз, когда идентифицируется номер индекса. Интересно, знали ли вы, как связать идентификатор с DOM, поскольку раньше это не работало?
var c = document.createElement('canvas'); c.id = 'myId'; div.appendChild(c);
Рассмотрим handlebarsjs.com