개체를 반복하고 값을 바꿉니다.

Question

어떤 점에는 4 단계 깊이있는 개체가 있지만 더 많은 수준을 적용해야하는 기능이 필요합니다. 나는 <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>) 통해).

현재 수동으로 반복하고 있지만 매우 깨끗하지 않으므로 더 좋은 방법이 있는지 궁금해하고 있습니다. 이것은 또한 2 단계 이상의 깊이에서는 작동하지 않습니다.

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 
    } 
    } 
} 

Answer 1

내가 쓴 솔루션입니다 :

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]); 
      } 
     }); 
     } 
    } 
    } 
} 

Answer 2

왜 당신은 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/