javascript - 如何通过.js将json数据加载到html

Question

这里我正在编写将数据从 json 文件加载到 .js 以及从 .js 加载到 HTML 文件的代码，但我成功地将 json 值加载到 .js，但无法将相同的值加载到 html。这是代码，请您帮助我。

HTML

<ul>
    <li ng-repeat="friend in friends">
    <input type="button" id="button" name="{{friend.name}}" value="{{friend.name}}"     onClick="checkBtn(event)"/>
        {{ friend.name }}
    </li>
</ul>

.js

        var app = angular.module( "Demo", [] );
    // I control the root of the application.
    app.controller("AppController",function( $scope ) {
            $.getJSON("Sample.json", function(json) {
            alert(json.ColumnName+" "+json.ColumnName.length);
            $scope.friends =[{name: json.ColumnName}];
            });

    }
    );      

其中显示警报中的值

sample.json 内容

{
"ColumnName": ["Customer Id", "City", "Region", "Order Quantity", "Order Revenue", "Margin", "Date"],
"Type":["dim", "dim", "dim", "meas", "meas", "meas", "dim"]
}

实际上这里发生的是，我需要加载名称意味着 ColumnName 中存在的数据来动态地按钮。但它没有加载。即使我没有得到任何 HTML 格式的输出，所以请任何人指导我哪里出错了。

Answer 1

我尝试过使用 jquery...

HTML:

<button id="clik">Click</button>
<table id="output" border="1" width="100%"></table>

脚本:

$("#clik").click(function() {
  $("#output").empty();
  $.getJSON("copy of data.json", function(json) {
    var $thead = $("<tr><th>Month</th><th>Revenue</th><th>Overhead</th></tr>");
    $thead.appendTo("#output");
    var $tRow = $("<tr></tr>");
    $.each(json, function(index, arrayObj) {
      var $tData = $("<td></td>");
      for (var i in arrayObj.data) {
        $tData.append(arrayObj.data[i]);
        $tData.append("<br>");
      }
      $tRow.append($tData);
    });
    $("#output").append($tRow);
  });
});