Handlebars шаблон не отображает данные, ни давая какую-либо ошибку

////////////////////////////////////
//  Function to append projects  //
//////////////////////////////////

function appendProjects(data) {
    var templateScript = document.getElementById('projects').innerHTML;
    var theTemplate = Handlebars.compile(templateScript);
    var compiledTemplate = theTemplate(data);
    document.getElementById('right').innerHTML = compiledTemplate;
}

///////////////////////////////////////
// Function to append projects list //
/////////////////////////////////////

function appendList(data) {
    var templateScript = document.getElementById('list').innerHTML;
    var theTemplate = Handlebars.compile(templateScript);
    var compiledTemplate = theTemplate(data);
    document.getElementById('left').innerHTML = compiledTemplate;
}

/////////////////////////////////
//  AJAX function             //
///////////////////////////////

function pullData() {
    var request = new XMLHttpRequest();
    request.open("GET", "/assets/data/projects.json", true);
    function onReadyStateChange() {
        if(request.readyState === 4) {
            if(request.status >= 200 & request.status <= 400) {
                var data = request.responseText;
                console.log(data);
                appendProjects(data);
                appendList(data);
            }
        }
    }
    request.onreadystatechange = onReadyStateChange;
    request.send();
}

и мой шаблон руля

<script type="x-handlebars-template" id="projects">
    {{#each this}}
    <img src="{{img}}" class="{{class}}">
    <p class="{{class}}" id="{{pid}}">{{description}}</p>
    <a href="{{url}}" target="_blank">
        <button class="try {{class}}" style="max-width: 49%; float: left; margin-right: 1%;">Try It</button>
    </a>
    <a href="{{source}}" target="_blank">
        <button class="{{class}} try" style="max-width: 49%; float: right; margin-left: 1%;"><i class="fa fa-github" aria-hidden="true"></i> Code</button>
    </a>
    {{/each}}
</script>

и это примеры данных

[
     {
        "name": "Doinmin",
        "img": "assets/img/doinmin.png",
        "description": "This project started as a basic to-do app, but along the way I turned it into something that I use while practicing a musical instrument. The app can be used to deal with big tasks that can be broken down into smaller tasks, with each task being dealt
                with for a certain amount of time. It prevents you from getting overwhelmed. The app is built using HTML5, CSS3, and jQuery. <br>The app is not fit for android based browsers because the alarm function doesn't work in android browsers, it is not allowed.
                You may try the app or look up the source code on GitHub.",
        "url": "http://doinmin.com/",
        "source": "https://github.com/relentless-coder/Doinmin",
        "class": "doin",
        "pid": "dpara",
        "lid": "doin"
    },
     {
        "name": "Weather Clock",
        "img": "assets/img/weather.png",
        "description": "I built this app to practice CSS3 animations and improve skills in Angular.js. The app has clock, alarm clock, and weather functionality. This is an ongoing project, so more features will added in the future.<br> The app uses Angular.js, HTML, and
                CSS3. I have used Angular.js controllers and services for the functionality, transform animations, and media queries to change the layout for responsive design. You may try the app or look up the source code on GitHub.",
        "url": "weather.html",
        "source": "https://github.com/relentless-coder/weather",
        "class": "weather",
        "pid": "wpara",
        "lid": "weather"
    }
]

мой шаблон не отображает никаких данных. Я не получаю никакой ошибки.
Я предполагаю, что это имеет какое-то отношение к данным, которые я предоставил, но я пытался явно проанализировать его в JSON, но это дало мне ошибку

   Uncaught SyntaxError: Unexpected token 
 in JSON at position 331
    at JSON.parse (<anonymous>)
    at XMLHttpRequest.onReadyStateChange (work.js:63)

1 ответ

  1. Ваша проблема, связанная с вашим JSON. Она содержит от некоторого вида скачками характеров. Просто попробуйте заменить его следующим контентом:

    [
         {
            "name": "Doinmin",
            "img": "assets/img/doinmin.png",
            "description": "This project started as a basic to-do app, but along the way I turned it into something that I use while practicing a musical instrument. The app can be used to deal with big tasks that can be broken down into smaller tasks, with each task being dealt with for a certain amount of time. It prevents you from getting overwhelmed. The app is built using HTML5, CSS3, and jQuery. <br>The app is not fit for android based browsers because the alarm function doesn't work in android browsers, it is not allowed. You may try the app or look up the source code on GitHub.",
            "url": "http://doinmin.com/",
            "source": "https://github.com/relentless-coder/Doinmin",
            "class": "doin",
            "pid": "dpara",
            "lid": "doin"
        },
         {
            "name": "Weather Clock",
            "img": "assets/img/weather.png",
            "description": "I built this app to practice CSS3 animations and improve skills in Angular.js. The app has clock, alarm clock, and weather functionality. This is an ongoing project, so more features will added in the future.<br> The app uses Angular.js, HTML, and CSS3. I have used Angular.js controllers and services for the functionality, transform animations, and media queries to change the layout for responsive design. You may try the app or look up the source code on GitHub.",
            "url": "weather.html",
            "source": "https://github.com/relentless-coder/weather",
            "class": "weather",
            "pid": "wpara",
            "lid": "weather"
        }
    ]
    

    Для решения проблемы в первую очередь необходимо очистить данные.
    Попробуйте заменить

    var data = request.responseText;
    

    С

    var data = JSON.parse(JSON.stringify(request.responseText));
    

    Похоже, это должно помочь в вашем случае