将json值打印到html中 [英] print json values into html

查看:157
本文介绍了将json值打印到html中的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

我正在从控制台中的json中获取这些值:Object {test: 0, howmuch: 0, day: 22, calls: Array[0]}

I am getting these values from my json in my console: Object {test: 0, howmuch: 0, day: 22, calls: Array[0]}

但是我怎么在我的html上打印呢?我试着做jQuery,但我听不懂.同样,对我来说,从网址获取这些值会很简单吗?

But how can I print this on my html? I tried doing jquery but I could not get. As well will be simple for me get these values from a url?

jquery:

$(document).ready(function () {
    $('#get-data').click(function () {
        var showData = $('#show-data');

        $.getJSON('real-data.json', function (data) {
            console.log(data);
            alert(data);

            showData.empty();

        });

        showData.text('Loading the JSON file.');
    });
});

json:

{
  "test": 0,
  "howmuch": 0,
  "day": 22,
  "calls": [

  ]
}

html:

<!DOCTYPE html>
<html>
  <head>
    <script data-require="jquery@2.1.1" data-semver="1.9.1" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0-rc1/jquery.min.js"></script>

        <script src="real-data.js"></script>
    <style>body{ background: #F9F9FA; }</style>
  </head>

  <body>
    <a href="#" id="get-data">Get JSON data</a>
    <div id="show-data"></div>
  </body>
</html>

推荐答案

不确定您是否正在寻找类似的东西. 无法使用$.getJSON,因此假设var x具有所需的值.

Not sure if you are looking for something like this. Not able to use $.getJSON so assuming var x has the required value.

var x ={
  "test": 0,
  "howmuch": 0,
  "day": 22,
  "calls": [
  ]
}

$(document).ready(function () {
    $('#get-data').click(function () {
      var _jsonString = "";

for(var key in x){
  _jsonString +="key "+key+" value "+x[key]+ '</br>';
}

$("#show-data").append(_jsonString)
});
});

Jsfiddle

这篇关于将json值打印到html中的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!

查看全文
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆