How to load the json data to html via .js

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.

have you checked that the json you are trying to access is in correct format and if you are able to access json[0].name — Ekansh Rastogi
– Ekansh Rastogi, Commented Sep 24, 2014 at 7:14
Yes in alert i am able to see all the values.(Month,Revenue,Overhead) — user2099759
– user2099759, Commented Sep 24, 2014 at 7:16
yes the iteration is happening and storing the data in category[] array. but not getting how to append it to HTML. — user2099759
– user2099759, Commented Sep 24, 2014 at 7:26

Aru · Accepted Answer · 2014-09-24 10:27:48Z

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

Collectives™ on Stack Overflow

How to load the json data to html via .js

1 Answer 1

Comments

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Related