json文件中的json2html（服务器端的python）

Question

I have the python code where I pass the json file

def home():
    with open('file.json', 'a+') as f:
        return render_template('index.html', json_data=f.read())

The file look like this

{"hosts": [{"shortname": "serv1", "ipadr": "10.0.0.1", "longname": "server1"}, {"shortname": "serv2", "ipadr": "10.0.0.2", "longname": "server2"}]}

On the client side, I wrote this code

<table id="placar" class="table table-condensed  table-bordered">
      <thead>
        <tr>
          <th>shortname</th>
          <th>longname</th>
          <th>ipadress</th>
        </tr>
      </thead>
      <tbody></tbody>
    </table>
</div>
<script>
var data = {{ json_data }}


var transform = {
    tag: 'tr',
    children: [{
        "tag": "td",
            "html": "${shortname}"
    }, {
        "tag": "td",
            "html": "${ipadr}"
    }, {
        "tag": "td",
            "html": "${longname}"
    }]
};

$('#placar > tbody ').json2html(data, transform);
</script>

But it doesn't work with my file, if write the simple array it works perfectly. Can anyone say what I did wrong, pass the file or create a table?

Answer 1

please try

import json
def home():
  with open('file.json', 'a+') as f:
    return render_template('index.html', json.dumps(f.read()))

Answer 2

You're gonna want to transform the data.hosts rather than just the data object like so

$('#placar > tbody ').json2html(data.hosts, transform);

so all together you'll have

var data = {"hosts": [{"shortname": "serv1", "ipadr": "10.0.0.1", "longname": "server1"}, {"shortname": "serv2", "ipadr": "10.0.0.2", "longname": "server2"}]};

var transform = {
    tag: 'tr',
    children: [{
        "tag": "td",
            "html": "${shortname}"
    }, {
        "tag": "td",
            "html": "${ipadr}"
    }, {
        "tag": "td",
            "html": "${longname}"
    }]
};

$('#placar > tbody ').json2html(data.hosts, transform);