Javascript 车把模板未显示数据，也未给出任何错误 //////////////////////////////////// //用于附加项目的函数// ////////////////////////////////// 功能项目（数据）{ var templateScript=document.getElementById（'projects'）.innerHTML； var theTemplate=handlebar.compile（模板脚本）； var compiledTemplate=模板（数据）； document.getElementById（'right'）.innerHTML=compiledTemplate； } /////////////////////////////////////// //用于附加项目列表的函数// ///////////////////////////////////// 函数附件列表（数据）{ var templateScript=document.getElementById（'list'）.innerHTML； var theTemplate=handlebar.compile（模板脚本）； var compiledTemplate=模板（数据）； document.getElementById（'left'）.innerHTML=compiledTemplate； } ///////////////////////////////// //AJAX函数// /////////////////////////////// 函数pullData（）{ var request=new XMLHttpRequest（）； open（“GET”，“/assets/data/projects.json”，true）； 函数onReadyStateChange（）{ if（request.readyState==4）{ 如果（request.status>=200&request.status

您的问题与您的JSON有关。它包含一些不规则字符。请尝试用以下内容替换它：

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

与

---

看起来这对你的情况应该有帮助

我提供的是我的数据样本。我无法发布全部数据，因为数据量很大。我将其作为一个对象数组，并且我已经检查了数据是否有问题。此外，解决方案没有帮助你验证JSON？@Sandepnayak我修复了我的JSON，但模板脚本没有问题id为“projects”的项目无效。它没有显示任何数据。您应该将对象传递给模板。因此，您需要解析JSON，然后将其传递给模板

<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"
    }
]

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

[
     {
        "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));