0

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

с функции 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>

3
  • Вы объявляете rootEl, а используете rootel. Регистр важен
    – Marat
    11 мая 2021 в 6:54
  • аа, понял ошибку
    – marat
    11 мая 2021 в 6:56
  • не подскажете, как обработать объекты в функции
    – marat
    11 мая 2021 в 6:57

1 ответ 1

0

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

'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

8
  • а можно как-то использовать map и foreach? вместе ... задача создать с помощью map и foreach
    – marat
    11 мая 2021 в 7:13
  • можно. просто используйте items.map(makePostEl).forEach(item => { el.appendChild(item); });
    – Marat
    11 мая 2021 в 7:14
  • textEl.textContent = 'posts.content'; значение content из объекта не передается в результат.. может где-то допустил ошибку... спасибо
    – marat
    11 мая 2021 в 7:14
  • Ошибка была в том, что Ваша функция makePostEl ничего не возвращала и получалось, что Вы пытались добавить undefined в DOM
    – Marat
    11 мая 2021 в 7:16
  • сейчас добавил return... но в браузере не выводится значение content второй вопрос: в коде нигде не указано, что добавить дом элементы после #root... не понял ((
    – marat
    11 мая 2021 в 7:21

Ваш ответ

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

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