Javascript 使用jQuery+；显示JSON数据的HTML

我想在前端显示json数据，但在post请求之后，虽然它成功了，但它提供了概括代码所需的特定数据。这是python代码

import json
from flask import Flask, render_template, request, jsonify
import requests
app = Flask(__name__)

def post(url, payload):
    returnData={}

    if url == 'http://api/my-general-api':
        r = requests.post(url, data=json.dumps(payload))
    else:
        r = requests.get(url)

    #r = requests.get()
    if r.status_code == 200:
        returnData["status"] = "SUCCESS"
        returnData["result"] = json.loads(r.text)
    else:
        returnData["status"] = "ERROR"

    return returnData

def processSingleHost(perfid, hostname, iteration):
    hostsData = {}
    payload = {
        "perfid" : perfid,
        "section" : {
            "hostname" : hostname,
            "iteration" : iteration,
            "sectionname" : "sysstat_M"
            }
    }
    returnData = post('http://api/my-general-api', payload)
    payload = {
                "perfid" : perfid,
                "section" : {
                    "hostname" : hostname,
                    "iteration" : iteration,
                    "sectionname" : "sysstat_x_1sec"
                    }
            }
    returnData1 = post('http://api/my-general-api', payload)
    return {
        "status" : "SUCCESS",
        "sysstat_M" : returnData,
        "sysstat_x_1sec" : returnData1
    }

@app.route("/",methods=['GET','POST'])
def home():
    if request.method == 'POST':
        #user inputs
        value1 = request.form.get('perfid')
        value2 = request.form.get('hostname')
        value3 = request.form.get('iteration')
        #api call 
        url1 = 'http://api/my-general-api'/{0}'.format(value1)
        payload= {}
        rdata = post(url1,payload)
        hostsData = {}
        if rdata["status"] == "SUCCESS":
            for item in rdata["result"]:
                for host in item["hosts"]:
                    hostsData[host["hostname"]] = processSingleHost(value1,host["hostname"], 1)       //here hostname contain specific value for specific host
        else:
            return "";

        return jsonify(hostname=hostsData);   // returning all host values 

    return render_template('index.html')





if __name__ == '__main__':
    app.run(debug=True)

这是我的

.js

文件，用于访问数据：

    $(document).ready(function() {
  console.log("ready!");


  $('form').on('submit', function() { 

    console.log("the form has beeen submitted");

    // grab values
    valueOne = $('input[name="perfid"]').val();
    valueTwo = $('input[name="hostname"]').val();
    valueThree = $('input[name="iteration"]').val();


    console.log(valueOne)
    console.log(valueTwo)
    console.log(valueThree)



    $.ajax({
      type: "POST",
      url: "/",
      dataType:'json',
      data : { 'perfid': valueOne,'hostname': valueTwo,'iteration': valueThree},
      success: function(data) {



        var x = parseInt(data.hostname.sysstat_M.result.sectoutput.summarystats.Avg.AVG); //here hostname is variable I am planning to use that will help to generalize access.

        if(x>80)
            {

                var p = '<p><div class="isa_warning"><i class="fa fa-warning"></i>CPU may be overloading.</div></p>';

                $('#result').append(p);

            }
        else
            {
                var p = '<div class="isa_success"><i class="fa fa-check"></i>CPU Usage is Normal.</div><p></p>';
                $('#result').append(p);
            }


      },
      error: function(error) {
        console.log(error)
      }
    });

  });

});

$('input[type="reset"]').on('click', function(e){
    e.preventDefault();
    $('#result').empty();
})

但将来这个主机名会有所不同。所以我需要概括一下，我能做些什么请建议

旁注： 如果您使用

hostname

或

IPs

来识别每个客户机的未通知；因为它应该失败

你必须用这个

无论如何，如果您只是想知道如何在不知道键的情况下修改javascript代码以访问JSON响应：

for(key in data){
    console.log(key);
    console.dir(data[key]);
}

编辑：

使用jQuery在选择框中显示可以按以下方式完成：

var options = "";
for (key in data) {
    options += '<option value="' + key + '">' + key + '</option>';
}
$("#my_dropdown").html(options);

var选项=”；
用于（输入数据）{
选项+=''+键+''；
}
$（“#我的#下拉列表”）.html（选项）；

通过使用它，我可以在控制台中显示它。但我感兴趣的是在第二个字段中只显示主机名作为下拉列表，如screenshot.var x=parseInt（key.sysstat\u M.result.sectoutput.summarystats.Avg.Avg）所示；现在我想在屏幕上显示它，我尝试的是“键”包含主机名为10.161.146.94/10.161.146.90，所以var x==parseInt（10.161.146.94/10.161.146.90.sysstat_M.result.sectoutput.sum marystats.Avg.Avg）；如上所述替换密钥并在其中显示内容存储。但不幸的是，这不起作用。如何才能使其起作用。如果您可以建议我找到解决方案。：）

var options = "";
for (key in data) {
    options += '<option value="' + key + '">' + key + '</option>';
}
$("#my_dropdown").html(options);