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

Question

here i am writing the code for loading the data from json file to .js and from .js to HTML file, but i am successfully able to load the json values to .js but not able to load the same value to html. here is the code please can you help me in it.

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

    }
    );      

in this it displaying the values in alert

sample.json content

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

actually what is happening here is, i need to load the name means the data present in ColumnName to button that too dynamically. but it not loading. even i am not getting any out put in HTML so please can any one guide me where i am going wrong.

Answer 1

I've tried something with jquery...

The HTML:

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

The Scipt:

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