将外部JSON数据加载到html中

时间:2017-05-19 22:24:21

标签: jquery json

我试着这样做,每当我按下提交按钮时,它就会填写我所有的" lorem ipsum"包含来自另一个文件的json数据的条目。我该怎么做才能正常工作?

这是我现在的HTML代码:

bq load --ignore_unknown_values dataset.new_table gs://path/to/file.csv ~/path/to/schema.json

这是我在test_json.json中的json代码:

<!-- 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>

1 个答案:

答案 0 :(得分:1)

考虑到您已经拥有IDvalue,您就非常接近了!假设您的JSON存储在var a中,您应该能够使用jQuery使用ID查找元素,并将值替换为文本! (点击提交后)

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

&#13;
&#13;
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);
  }
})
&#13;
<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>
&#13;
&#13;
&#13;