如何在Ajax的$.getJSON()中获取Json作为键和值？

Question

我有这段用于从Jobs.json文件获取JSON的Ajax代码。

 $(document).ready(function(){
        $('#btn2').click( callJobs );
        });

function callJobs()
{


     alert("getting results...");
    $.getJSON('Jobs.json', function(JSON){
        $('#result').empty();

        $.each(JSON.jobs, function(i, JOB){
            $('#result')
            .append(JOB.Job +'<br />')
            .append(JOB.Priority+'<br />')
            .append(JOB.DueDate+'<br />')
            .append(JOB.Iscompleted+'<hr />');
      });
    });
}

以下是Jobs.json代码。

{
"jobs":[
  {
     "Job":"Job1",
     "Priority":"Low",
     "DueDate":"11.03.2013",
     "Iscompleted":"No"
  },
  {
     "Job":"Job2",
     "Priority":"High",
     "DueDate":"11.03.2013",
     "Iscompleted" : "No"
  },
  {
     "Job":"Job3",
     "Priority":"Medium",
     "DueDate":"11.03.2013",
     "Iscompleted":"No"
  }
  ]
  }

现在我想要动态重写$.each函数。也就是说，它将以键值对的形式编写JSON字符串，而不是使用.append()。

- ntf

Answer 1

这将动态地遍历每个工作的属性：

$.getJSON('Jobs.json', function(JSON){
    var $container = $('#result').empty();

    $.each(JSON.jobs, function(i, JOB) {
        $.each(JOB, function(key, value) {
            $container.append(key + ': ' + value + '<br />');
        });
        $container.append('<hr />');
    }
});

演示

- Ja͢ck

---

抱歉，它没有起作用。我想知道为什么它不起作用。它看起来没问题。 - ntf

function callJobs() { alert("正在获取结果..."); var $container = $('#result');$.each(JSON.jobs, function(i, JOB) { $.each(JOB, function(key, value) { $container.append(key + ': ' + value + '
'); }); $container.append('

---

'); });}我写成了这样。哪一个是错误的？ - ntf

@ntf 很棒！顺便说一下，我不会选择JSON作为我的变量名，因为它会遮盖掉window.JSON，而在大多数浏览器上启用了json处理方法。 - Ja͢ck

@ntf 另外，由于您是新手，请阅读“关于”以了解如何接受答案。 - Ja͢ck

@Jack：在最后一个属性和<hr />之间添加了额外的<br />。 - Cᴏʀʏ

Answer 2

这是我的方法。我已添加注释以解释过程。

$.each(JSON.jobs, function(i, JOB) {
    // an empty array for the output values
    var values = [];
    // iterator over each property in the current JOB object
    for (var prop in JOB) { 
        // add an item to the array in format "key: value"
        values.push(prop + ': ' + JOB[prop]); 
    }
    // join the array values using '<br />' as separator; 
    // append to #result and add an '<hr />' after
    $('#result').append(values.join('<br />')).append('<hr />');
});

我的目标是保持这个解决方案的可读性（代价是增加一个数组），仅选择一次#result元素，而不必处理在每个循环中是否要添加最后一个<br />。其他解决方案在最后一个属性和<hr />之前追加了额外的<br />，而这个解决方案和您的原始解决方案则没有。

- Cᴏʀʏ

---

我将这段代码添加到我的文件中，它可以正常工作。非常感谢。我还有一个问题。当向Json文件中添加更多参数时，它会起作用吗？键和值是否会被传递？ - ntf

@ntf：是的，随着添加更多参数，它应该可以正常工作！另外，我看到你是新来的。你应该给有帮助或对你有用的答案点赞/接受答案。 - Cᴏʀʏ

我喜欢这个，它是一个非常干净的解决方案。+1 - Ben McCormick

@Cory 需要15个声望才能进行点赞/接受回答。很抱歉我现在不能投票。 - ntf

@ntf 你不应该需要任何声望来接受自己问题的答案。 - Ben McCormick