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();
}

我的Handlebars模板是

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

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

把手模板不显示数据，也不会出现任何错误

1 个答案: