On-Click遍历JSON的特定节点

时间:2013-07-17 06:31:38

标签: javascript jquery json traversal jquery-traversing

所以我有一个模态。当触发提取时。 1个JSON文件。 JSON有多个节点;但是,我只想定位最后4个节点并省略之前的任何内容。这些节点的名称是:post_a, post_b, post_c, post_d. 它们将始终是数组中的最后4个节点。 这是我能想到的最佳逻辑:c

我正处于我的投资组合的最后一次互动中,我对如何遍历这4个节点感到非常难过。我知道它会赢得关键逻辑,我对此很满意。我在兔子洞的距离很远,现在我只想让它起作用。 :(

示例JSON文件:

{
  created_at: "2013-07-15T05:58:25Z", 
  id: 21, 
  name: "Skatelocal.ly",
  svg: "<svg> ... </svg>",
  post_a: "This is an awesome post 1", 
  post_b: "This is an awesome post 2", 
  post_c: "this is an awesome post 3", 
  post_d: "this is an awesome post 4"
}

以下是触发器以及它应如何遍历的JSfiddle:

JSFIDDLES


postInModal = function(data, status) {

  $(".next").on({
    click: function() {
    //jsfiddles has working interaction dont want to cludder  
    $(".modal-main").hide().html(data.post_X).fadeIn()
    }
  });
  return $(".prev").on({
    click: function() {
    //jsfiddles has working interaction dont want to cludder
    $(".modal-main").hide().html(data.post_X).fadeIn()
    }
  });
};
return popProject = function(x) {
  return $.ajax({
    type: "GET",
    url: "/works/" + x + ".json",
    success: postInModal
  });

2 个答案:

答案 0 :(得分:0)

这样的东西?

var keys = [ 'post_a', 'post_b', 'post_c', 'post_d' ];
$.each(keys, function(i, key) {
  var val = yourJsonObject[key];
  // do something with val ..  
});

逐个绘制每个值:

var keys = [ 'post_a', 'post_b', 'post_c', 'post_d' ];
var index = 0;

function getNext() {
  if (index < keys.length) {
    var key = keys[index++];
    var val = yourJsonObject[key];
    return val;
  }
  return null;
}

在点击处理程序中尝试

var val = getNext();
if (val != null) {
  // do something with value
} else {
  // we haven gotten everything already
  // do nothing or reset index to start again or whatever
}

答案 1 :(得分:0)

您可以尝试使用此逻辑,遍历JSON对象以查找 post _ * 值的值,推送到数组对象。现在,当点击.next.prev按钮时,此数组对象可用于迭代

遍历代码如下

       function js_traverse(o) {
            var type = typeof o;
            if (type == "object") {
                for (var key in o) {
                    if (key.indexOf("post_") >= 0)
                        print(o[key]);                        
                }
            } 
        }

如果您在演示代码中指定了多个类型的对象,那么您可以使用维数组对象。

您还可以在此fiddle

查看演示

欢迎查询!