动态添加html内容时出现意外令牌非法错误

Question

我正在从rest rest服务中获得以下json。-

[
{
    "jobId": 1000160829,
    "jobRefID": "Blue Shields key hospital contract negotiations using robust analytic tools and analyses--strategic contract roadmap, negotiation factsheets, and…",
    "companyName": "Blue Shield Of California",
    "jobTitle": "Senior Manger, Business Analysis",
}]

我有以下代码来使用这些数据并生成动态html内容-

htmlAdd += '<ul class="list-unstyled">';
            for (i=0; i<data.length; i++){
                htmlAdd += '<li><div class="row"><div class="col-lg-2"> <img class="img-responsive" src="assets/images/companies/opentable.png" alt="" />';
                htmlAdd += '</div><div class="col-lg-10"><ul align="left" class="list-unstyled">';
                htmlAdd += '<li><h4><a href="#">'+data[i].jobTitle+'&#8212;</a></h4>;
                htmlAdd += '</li><li>'+data[i].companyName+'&#8212;'+data[i].city+', '+data[i].state+'&nbsp;<a href="#"><span class="glyphicon glyphicon-map-marker"></span></a></li>';
                htmlAdd += '<li class="digest">&#183; '+data[i].jobDescription+'<a href="#">details</a></li>;
                htmlAdd += '</ul></div></div></li>;
                htmlAdd += '<li><hr/></li>';
            }
           htmlAdd += '</ul>;
           document.getElementById('jobListing').innerHTML = htmlAdd;

同样的静态代码也可以工作-

<div class="content">
      <ul class="list-unstyled">
        <li>
          <div class="row">
            <div class="col-lg-2"> <img class="img-responsive" src="assets/images/companies/opentable.png" alt="" /> </div>
            <div class="col-lg-10">
              <ul align="left" class="list-unstyled">
                <li>
                  <h4><a href="#">Senior Software Engineer &#8212; Data Science team</a></h4>
                </li>
                <li class="digest">&#183; Rapidly develop proof-of-concept prototypes to prove out hypotheses 
                  &#183; Design, architect, implement, and debug robust, high-volume production...&nbsp;<a href="#">details</a></li>
                <li class="digest"><a href="#">Overview</a> | <a href="#">Reviews</a> | <a href="#">Salaries</a></li>
              </ul>
            </div>
          </div>
        </li>
        <li>
          <hr/>
        </li>

有人知道错误在哪里吗？

Answer 1

下面的代码应该会有所帮助，因为您的原始代码缺少匹配的撇号(')

for (i=0; i<data.length; i++){
    htmlAdd += '<li><div class="row"><div class="col-lg-2"> <img class="img-responsive" src="assets/images/companies/opentable.png" alt="" />';
    htmlAdd += '</div><div class="col-lg-10"><ul align="left" class="list-unstyled">';
    htmlAdd += '<li><h4><a href="#">'+data[i].jobTitle+'&#8212;</a></h4>';
    htmlAdd += '</li><li>'+data[i].companyName+'&#8212;'+data[i].city+', '+data[i].state+'&nbsp;<a href="#"><span class="glyphicon glyphicon-map-marker"></span></a></li>';
    htmlAdd += '<li class="digest">&#183; '+data[i].jobDescription+'<a href="#">details</a></li>';
    htmlAdd += '</ul></div></div></li>';
    htmlAdd += '<li><hr/></li>';
}
htmlAdd += '</ul>';

修正你的撇号