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

Question

//////////////////////////////////// 
// 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) 

Answer 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)); 

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