Loading external JSON data into html

Question

Im trying to make it so whenever I press my submit button, it will then fill out all of my "lorem ipsum" entries with the json data from another file. How do I go about making it so this works correctly?

This is my html code right now:

<!-- begin panel --> <div class="panel panel-inverse" data-sortable-id="table-basic-1"> <div class="panel-heading"> <div class="panel-heading-btn"> <a href="javascript:;" class="btn btn-xs btn-icon btn-circle btn-default" data-click="panel-expand"><i class="fa fa-expand"></i></a> </div> <h4 class="panel-title">New RTU FZB-1000 - FZB-1000</h4> </div> <div class="panel-body"> <table class="table"> <tbody> <tr> <td><b>Status</b></td> <td id="fld_status">Lorem ipsum dolor </td> </tr> <tr> <td><b>Server Update</b></td> <td id="fld_server_update">Lorem ipsum dolor </td> </tr> </tbody> </table> </div> </div> <div class="panel panel-inverse" data-sortable-id="table-basic-1"> <div class="panel-heading"> <div class="panel-heading-btn"> <a href="javascript:;" class="btn btn-xs btn-icon btn-circle btn-default" data-click="panel-expand"><i class="fa fa-expand"></i></a> </div> <h4 class="panel-title">Remote Terminal Unit</h4> </div> <div class="panel-body"> <table class="table"> <tbody> <tr> <td><b>Signal Strength</b></td> <td id="fld_signalstr">Lorem ipsum dolor </td> </tr> <tr> <td><b>Main Power</b></td> <td id="fld_power">Lorem ipsum dolor </td> </tr> <tr> <td><b>Backup Battery</b></td> <td id="fld_battery">Lorem ipsum dolor </td> </tr> <tr> <td><b>Ambient Temperature</b></td> <td id="fld_temp">Lorem ipsum dolor </td> </tr> </tbody> </table> </div> </div> <!-- end panel --> <div class="col-md-8 col-md-offset-4"> <input id="btn" type="submit" class="btn btn-sm btn-primary m-r-5"></input> </div>

This is my json code in test_json.json:

{ "fld_status": "Online", "fld_server_update": "Friday, May, 19, 2017 10:33:53 AM Central Daylight Time", "fld_signalstr": "42%", "fld_power": "23.98 Volts", "fld_battery": "7.538 Volts", "fld_temp": "72 Degrees F", }

Go to the jquery api and take a look at the getJson method. Should give you some ideas. api.jquery.com/jQuery.getJson — Taplar
– Taplar, Commented May 19, 2017 at 22:28

Hodrobond · Accepted Answer · 2017-05-19 22:30:48Z

Considering you've already got the ID and the value, you're pretty close! Assuming your JSON is stored in var a you should be able to use jQuery to find the element using the ID, and replace the text with the value! (After clicking submit)

$("#btn").click(function(){ for (key in a) { var identifier = key; var value = a[key]; $("#" + identifier).html(value); } })

var a = { "fld_status": "Online", "fld_server_update": "Friday, May, 19, 2017 10:33:53 AM Central Daylight Time", "fld_signalstr": "42%", "fld_power": "23.98 Volts", "fld_battery": "7.538 Volts", "fld_temp": "72 Degrees F", }; $("#btn").click(function(){ for (key in a) { var identifier = key; var value = a[key]; $("#" + identifier).html(value); } })

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="panel panel-inverse" data-sortable-id="table-basic-1"> <div class="panel-heading"> <div class="panel-heading-btn"> <a href="javascript:;" class="btn btn-xs btn-icon btn-circle btn-default" data-click="panel-expand"><i class="fa fa-expand"></i></a> </div> <h4 class="panel-title">New RTU FZB-1000 - FZB-1000</h4> </div> <div class="panel-body"> <table class="table"> <tbody> <tr> <td><b>Status</b></td> <td id="fld_status">Lorem ipsum dolor </td> </tr> <tr> <td><b>Server Update</b></td> <td id="fld_server_update">Lorem ipsum dolor </td> </tr> </tbody> </table> </div> </div> <div class="panel panel-inverse" data-sortable-id="table-basic-1"> <div class="panel-heading"> <div class="panel-heading-btn"> <a href="javascript:;" class="btn btn-xs btn-icon btn-circle btn-default" data-click="panel-expand"><i class="fa fa-expand"></i></a> </div> <h4 class="panel-title">Remote Terminal Unit</h4> </div> <div class="panel-body"> <table class="table"> <tbody> <tr> <td><b>Signal Strength</b></td> <td id="fld_signalstr">Lorem ipsum dolor </td> </tr> <tr> <td><b>Main Power</b></td> <td id="fld_power">Lorem ipsum dolor </td> </tr> <tr> <td><b>Backup Battery</b></td> <td id="fld_battery">Lorem ipsum dolor </td> </tr> <tr> <td><b>Ambient Temperature</b></td> <td id="fld_temp">Lorem ipsum dolor </td> </tr> </tbody> </table> </div> </div> <!-- end panel --> <div class="col-md-8 col-md-offset-4"> <input id="btn" type="submit" class="btn btn-sm btn-primary m-r-5"></input> </div>

Thanks for the assistance! I've been stuck on this for an hour or so! But not anymore!

Collectives™ on Stack Overflow

Loading external JSON data into html

1 Answer 1

1 Comment

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Related