循環遍歷對象並替換值

我有一個對象，它在某些點上是四個深度，但是我想要一個可以應對更多層次的函數。我試圖編寫一個函數來替換<span class="ajax-parent1-parent2-parent3-value"></span>將被替換爲parent1.parent2.parent3.value。循環遍歷對象並替換值

問題是深度是可變的，所以我可以用<span class="ajax-parent1-value"></span>替換爲parent1.value。

最後，它並不總是被替換的文本。或者，data-attr可以指定要使用的屬性（通過element.attr(<data-attr>, <value>)）。

目前，我手動迭代，但它不是很乾淨，所以我想知道是否有更好的方法來做到這一點。這也不適用於兩個以上的深度。

function render(data) { 
    $.each(data, function(parent, value) { 
    $.each(value, function(element, value) { 
     $el = $('.ajax-' + parent + '-' + element); 
     $.each($el, function(key, el) { 
     if ($(el).data('attr')) { 
      $(el).attr($(el).data('attr'), value); 
     } else { 
      $(el).text(value); 
     } 
     } 
    }); 
    }); 
}

例子中的物體：

{ 
    "profile": { 
    "username": "johnd", 
    "bio": "Some example data about John", 
    "website": "http://john.com", 
    "profile_picture": "http://john.com/me.jpg", 
    "full_name": "John Doe", 
    "counts": { 
     "media": 13, 
     "followed_by": 26, 
     "follows": 49 
    }, 
    "id": "16" 
    }, 
    "dashboard": { 
    "script": { 
     "tags": ["media"], 
     "stats": { 
     "liked": 0, 
     "lastrun": "never", 
     "duration": 0 
     }, 
     "status": { 
     "code": 0, 
     "slug": "disabled", 
     "human": "Disabled", 
     "message": "Not running." 
     } 
    }, 
    "account": { 
     "plan": "free", 
     "created": 1419261005373, 
     "updated": 1419261005373 
    } 
    }, 
    "serverInformation": { 
    "serverName": "Johns API", 
    "apiVersion": "0.0.1", 
    "requestDuration": 22, 
    "currentTime": 1419262805646 
    }, 
    "requesterInformation": { 
    "id": "redacted", 
    "fingerprint": "redacted", 
    "remoteIP": "redacted", 
    "receivedParams": { 
     "action": "getDashboard", 
     "apiVersion": 1 
    } 
    } 
}

來源

2014-12-22 Benedict Lewis

提供你的HTML –

'類= 「AJAX-parent1.value」'這是一個不好的做法，我們在類名 – demo

@ Mohamed-Yousef中使用e'dot' HTML不重要，它全部遵循'中的值'''，其中一個新級別用' '。 –

這裏是我寫的解決方案：

function iterate(obj, stack) { 
    for (var property in obj) { 
    if (obj.hasOwnProperty(property)) { 
     if (typeof obj[property] == "object") { 
     iterate(obj[property], stack + '-' + property); 
     } else { 
     $group = $('.ajax' + stack + '-' + property); 
     $.each($group, function(key, element) { 
      if ($(element).data('attr')) { 
      $(element).attr($(element).data('attr'), obj[property]); 
      } else { 
      $(element).text(obj[property]); 
      } 
     }); 
     } 
    } 
    } 
}

來源

2014-12-22 18:06:03

你爲什麼不從HTML開始，所以你只能訪問你真正想要的屬性渲染？這樣你就可以保持它非常簡單（也請注意，這樣就不需要按照與數據對象相同的順序/深度嵌套HTML跨度，只需將任何HTML節點放置在任何位置即可，只要確保不會出現任何錯誤， T選用類/節點名，曾多次

function parseData(data) { 
    var $container = $('.ajax'); 

    $container.find("[class^='ajax-']").each(function(i, el) { 
     var $el = $(el); 
     if ($el.children().length === 0) 
     { 
      var nodes = $el.attr('class').split('-'); 
      nodes.shift(); 

      var node = data; 
      for (var i = 0; i < nodes.length; i++) { 
       node = node[nodes[i]]; 

       if (typeof(node) == "undefined") { 
        break; 
       } 
      } 

      if ($el.data('attr')) 
      { 
       $el.attr($el.data('attr'), node); 
      } 
      else 
      { 
       $el.text(node); 
      } 
     } 
    }); 
}

小提琴這裏：

http://jsfiddle.net/ckcduLhn/5/

來源

2014-12-23 10:35:20

循環遍歷對象並替換值

回答

相關問題