Почему не отображается html код подгружаемый динамически?

Question

[Apach1]

Разбираюсь с nodejs. Есть файл clientpage.ejs:

<div id="projects-field">

</div>

файл project.js

const card = post =>{
    return `<div class="container lead project">
    <div class="row">
        <div class="col align-self-center"><a href="/api/project/${post.url}">${post.name}</a></div>
        <div class="col align-self-center">${post.startdate}</div>
        <div class="col align-self-center">${post.enddate}</div>
        <button type="button" class="btn btn-default btn-lg">
            <span class="octicon octicon-trashcan" ></span>
        </button>
    </div>
</div>`
};

function renderproj(_project = []){
 const $project = document.querySelector('#projects-field');

$project.innerHTML =  _project.map(post => card(post)).join(' ');
}


document.addEventListener('DOMContentLoaded',()=>{
    $.ajax({
        type: 'GET',
        contentType: 'application/json',
        url: '/api/project'
    }).done(function(data) {

            projects = data.concat();
            renderproj(projects);
    });

});

Код получает в запросе массив, передает в функцию и отображает на странице в блоке projects-field элементы массива по шаблону card.
Но когда я просматриваю код страницы в браузере по факту projects-field пустой и я не могу работать с полями карточки через js. Вопрос почему и как сделать, чтобы код html был по факту на страницу?

Comments

[sdgroup14]

что консоль говорит?

Answer 1

[sdgroup14]

Больше всего уверен что у вас проблема с ajax запросом и тем что вы получаете. воссоздал вашу ситуацию https://codepen.io/sdgroup14/pen/PBKKYL . Посмотрите в консоли что отдает ajax. если он что то отдает, то посмотрите что это... вы ждете массив но вы даже если что-то получаете - это не массив. И единственный вопрос зачем вы конкатенируете data? Или я еще не проснулся или у вас его не с чем конкатенировать при загрузке страницы. А так... 2 остальные функции работают нормально