用Json数据封装Html

Wrapping Html with Json Data

本文关键字：Html 数据封装 Json      更新时间：2023-09-26

我遇到的问题是执行后，页面不会得到json数据，页面会以字符串的形式显示以下内容。但是我所有的web api服务都成功地获取了数据。

{{recipe.Name}}
{{recipe.desc}}
{{recipe.allergen}}
{{recipe.cost}}

我的HTML:

<accordion  close-others="false" >
  <div>
    <accordion-group  class="div-recipe-header">
      <accordion-heading></accordion-heading> 
      <div class="inner"></div> 
    </accordion-group>
  </div>
</accordion>

我的JavaScript包装

<script>
  $(document).ready(function () {
    aa = global.userhtml// handles the UserHtml Data in Json return
    $(".inner").wrapAll(aa)
  })
</script>

示例JSON数据：

{
  ID: "0908",
  UserHtml: "<table ><tbody><trclass="recipe-list" data-ng-repeat="recipe in
                      recipe_data" ng-if="recipe.Keyword == keyw.Keyword" ><td><center>
                       <span id="img{{recipe.ID}}X"><a id="{{recipe.ID}}"  href="javascript:void(0);">
                        <img  ng-if="recipe.ID !=='" fallback-src="images/default.png" ng-src="
                         {{recipe.Pictures}}" class="images" id="img{{recipe.ID}}"/> <div class="div-recipe- 
                          allergen">{{recipe.allergen}}</div><div class="div-recipe-cost">{{recipe.cost}}
                         </div></td></tr></tbody></table>"
}

工作Plunker:

http://plnkr.co/edit/KOqwCFTD4aeaCsumRdom?p=preview

// DISCLAIMER: This is EXTREMELY DIRTY, it "works" but have many potential issues 
// (depending what you are trying to do with it which has not been stated at all in the question)
var myglobal = {
  userhtml: '<table><tbody><tr class="recipe-list" ng-repeat="recipe in recipe_data" ng-if="recipe.Keyword == keyw.Keyword" ><td><center><span id="img{{recipe.ID}}X"><a id="{{recipe.ID}}"  href="javascript:void(0);">'+
            '<img  ng-if="recipe.ID !==''''" fallback-src="images/default.png" ng-src="{{recipe.Pictures}}" class="images" id="img{{recipe.ID}}"/> <div class="div-recipeallergen">{{recipe.allergen}}</div><div class="div-recipe-cost">{{recipe.cost}}</div></td></tr></tbody></table>',
  recipe_data: [  { ID: '1234', Pictures:'/picture.jpeg', 
                    Keyword: 'food', allergen:'peanuts', cost:'5$' }, 
                  { ID: '1235', Pictures:'/picture.jpeg', 
                    Keyword: 'food', allergen:'kiwi', cost:'10$' } ]
};

var app = angular.module('plunker', []);
app.directive("myUserHtml", ['$compile', function($compile){
  return {
    restrict: 'C',
    link: function(scope, element, attrs) {
      // Extremely dirty hack!
      scope.myglobal = myglobal;
      scope.recipe_data = myglobal.recipe_data;
      scope.keyw = {Keyword:"food"};
      scope.$watch('myglobal.userhtml', function() {
        element.html(scope.myglobal.userhtml);
        $compile(element.contents())(scope);
      });      
    }
  };
}]);

HTML已经被修改（注意myuserhtml类：这是触发上面定义的指令的类（与名称myUserHtml匹配）。

<accordion close-others="false">
  <div>
    <accordion-group class="div-recipe-header">
      <accordion-heading></accordion-heading>
      <div class="inner my-user-html"></div>
    </accordion-group>
  </div>
</accordion>

我把"数据ng重复"改为"ng重复"。我怀疑您的服务器端代码没有正确处理一行中的两个单引号（并将其转换为一个单引号）。我添加了反斜杠，所以它读取recipe.ID !==''''——这是正确的转义，所以最终结果HTML只是recipe.ID !==''

您在服务器上使用什么语言来生成JSON？（或者更好的是向我们展示源代码！！）它没有正确地为JSON转义字符串。使用工具或库来构建json文档如果您不了解发生了什么，请不要使用字符串串联。

@KeenEgs jasonSCript是对的，您的javascript字符串严重损坏。它不仅仅是"将单引号改为双引号"和将"双引号改为单引号"。Javascript和HTML支持单引号或双引号。如果你试图将一个字符串"嵌套"在另一个字符串中，你必须格外小心。你必须真正理解这个概念才能在编程中取得成功。

var a="abcd"；//有效字符串-正常

var a="ab"cd"；//这是无效的，中间的引号将结束离开cd的字符串"；作为无效的javascript。

var a="ab''"cd"；//这是有效的："反斜杠"''用于表示下一个字符是字符串的一部分，而不是终止字符串。

var a='ab"cd'；//这是有效的：使用不同的引号，这样就不会混淆。

由于您的模板包含字符串（我也在其中看到了一个引号），您必须格外小心。您甚至可能最终拥有3个级别：字符串内部字符串内部字符串！

您的JSON字符串无效。您正在提前结束字符串报价

{
  ID: "0908",
  UserHtml: "<table ><tbody><trclass="..... <- You're closing your quotes here
}

尝试使用单引号代替

{
  ID: "0908",
  UserHtml: '<table ><tbody><trclass="..etc..."
            |                        ^ double quotes for html within JSON string
            ^ single quotes around JSON object
}

还要确保没有包含任何新行。

我建议检查JSON lint站点，如http://jsonlint.com/验证您的JSON

I关于json字符串格式，其他答案可能是正确的，但最大的障碍是，除非先编译，否则不能将传入的html字符串视为Angular的模板。在使用html段之前尝试这样做：

global.userhtml = $compile(global.userhtml)($scope);
相关文章：