JS создать DOM дерева из объекта c функции map foreach

Question

Как из объекта создать элементы разметки... чтобы, функция проверял тип объекта и от типа объекта создать сам элемент дерева

с функции map и foreach

'use strict';

const posts = [
    {
        id: 3,
        type: 'text',
        content: 'Final Week',
    },
    {
        id: 1,
        type: 'image',
        content: 'source image',
    },
    {
        id: 1,
        type: 'video',
        content: 'source video',
    },
];

const rootEl = document.getElementById('root');

function makePostEl(post) {
    if (posts.type === text) {
        const containerText = document.createElement('div');
        containerText.dataset.type = 'text';
        containerText.dataset.id = '3';
        const textEl = document.createElement('div');
        textEl.textContent = 'posts.content';
        containerText.appendChild(textEl);

    } else if (posts.type === image) {
        const containerImage = document.createElement('div');
        containerImage.dataset.type = 'image';
        containerImage.dataset.id = '2';
        const imageEl = document.createElement('img');
        imageEl.src = 'posts.content';
        containerImage.appendChild(imageEl);

    } else if (posts.type === video) {
        const containerVideo = document.createElement('div');
        containerVideo.dataset.type = 'video';
        containerVideo.dataset.id = '1';
        const videoEl = document.createElement('video');
        videoEl.src = 'posts.content';
        videoEl.controls = true;
        containerVideo.appendChild(videoEl); 
    };
};

function makeWall(el, item) {


    items.map(makePostEl).forEach(item => {
        rootEl.appendChild(item)
    });
    
}

makeWall(rootEl, posts);

<div id="root"></div>

Answer 1

Попробуйте так

'use strict';

const posts = [
    {
        id: 3,
        type: 'text',
        content: 'Final Week',
    },
    {
        id: 1,
        type: 'image',
        content: 'source image',
    },
    {
        id: 1,
        type: 'video',
        content: 'source video',
    },
];

const rootEl = document.getElementById('root');

function makePostEl(post) {
    if (post.type === 'text') {
        const containerText = document.createElement('div');
        containerText.dataset.type = 'text';
        containerText.dataset.id = '3';
        const textEl = document.createElement('div');
        textEl.textContent = post.content;
        containerText.appendChild(textEl);
        return containerText;

    } else if (post.type === 'image') {
        const containerImage = document.createElement('div');
        containerImage.dataset.type = 'image';
        containerImage.dataset.id = '2';
        const imageEl = document.createElement('img');
        imageEl.src = post.content;
        containerImage.appendChild(imageEl);
        return containerImage;

    } else if (post.type === 'video') {
        const containerVideo = document.createElement('div');
        containerVideo.dataset.type = 'video';
        containerVideo.dataset.id = '1';
        const videoEl = document.createElement('video');
        videoEl.src = post.content;
        videoEl.controls = true;
        containerVideo.appendChild(videoEl); 
        return containerVideo;
    };
};

function makeWall(el, items) {


  items.map(makePostEl).forEach(item => {    
    el.appendChild(item);
  });
    
}

makeWall(rootEl, posts);

Лучше используйте один forEach вместо map->forEach

БЛОГ НА HUSL

JS создать DOM дерева из объекта c функции map foreach

Ответы (1 шт):