Question

我有一个包含以下内容的Json文件

{"title":"Json 10","body":"lorem","price":"12"}

内容来自表单，用户可以提交此数据。

稍后我需要让用户能够在他的网站上显示这些数据。因此我正在使用一个小部件。小部件抓住了json，将内容放在restaurant-widget-container div中

我的问题是：我如何访问每个属性。使用此代码

var jsonp_url = "http://localhost:8000/uploads/json/10_dailydish.json";
       jQuery.getJSON(jsonp_url, function(result) {
        //alert(result.html);
        $('#restaurant-widget-container').html(result.title);

       });

在我的＆＃34; restaurant-widget-container＆＃34;中显示json文件的内容。

我需要在div中显示标题，正文和价格。但是使用上面的代码我只是显示标题。

我也玩过

$('#restaurant-widget-container').append(result.title).append(result.body);

这基本上有效，但我觉得有更好的方法。

Answer 1

如果你不知道你的JSON对象的键，那么你可以用一个简单的迭代：

for (var k in result) { 
    // This print out the value
    console.log("The value" + result[k]); 
}

但是，如果你想直接访问，因为你知道要访问的密钥，而不是你有两种方法：

var v = result["mykey"];

如果你在一些配置变量中将键作为字符串，这很好。

或更直接：

var v = result.mykey;

问题的第二部分是关于使用jquery修改HTML的值。

这里是你的代码：

$('#restaurant-widget-container').append(result.title).append(result.body);

这只是将字符串添加到id为＃restaurant-widget-container 的dom元素。

在这里你应该正确设计和编写你的html。您可以直接在页面中执行此操作，然后使用jquery访问以更新值，或使用模板引擎行把手。

选择取决于案例的复杂程度和口味。

所以你可以使用jquery和一个命令式方法编写一个简单的html示例。

// Reset the current content to avoid concatenation
// of previous results.
$('#restaurant-widget-container').html('');

var $resultTitle = $('<h1></h1>').text(result.title);

var $resultBody = $('<div></div>').html(result.body);

var $resultPrice = $('<span></span>').text('Price: ' + result.price + ' $');

$('#restaurant-widget-container')
    .append($resultTitle)
    .append($resultBody)
    .append($resultPrice);

这是一个有效的例子。

$(function() {

function showResults(result) {
    // Reset the current content to avoid concatenation
    // of previous results.
    $('#restaurant-widget-container').html('');

    var $resultTitle = $('<h1></h1>').text(result.title);

    var $resultBody = $('<div></div>').html(result.body);

    var $resultPrice = $('<span></span>').text('Price: ' + result.price + ' $');

    $('#restaurant-widget-container')
        .append($resultTitle)
        .append($resultBody)
        .append($resultPrice);
}
 
  $('button').click(function(ev) {
    ev.preventDefault();
    showResults({"title": "My cool title!", "body": "All you need to write goes here...", "price": 123.45});
   });
  
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="restaurant-widget-container">
  </div>
<hr/>
<button>Show</button>

访问Json属性

1 个答案: