Добавить данные вложенных объектов в форму

Question

Я добавляю данные в форму из объектов, которые могут быть многослойными.

Форма Пример

<form id="myForm"> 
    <input name="foo" /> 
    <input name="bar" /> 
</form> 

Пример данных

var myData = { 
    level1: { 
     foo: 'hello', 
     level2: { 
      bar: 'greetings' 
     } 
    } 
} 

Добавить данные для формирования

$.each(data, function (i, e) { 
    var field = $('[name="' + i + '"]'); 
    if (field.is('input')) field.val(e); 
}); 

Теперь о Очевидно, это не сработает, поэтому у меня есть два варианта.

A) Свести объект

var myResult = { 
    level1 : '', 
    foo : 'hello', 
    level2 : '', 
    bar : 'greetings' 
} 

B) Рекурсивный пройти через объект

Но я думаю, что даже делать, мне нужно сделать В любом случае. Таким образом, B - это более быстрый выбор. Теперь, как я рекурсивно просматриваю объект? Я работал над этой скрипкой и пытался реализовать рекурсивный цикл for, но этот цикл не извлекает значение из свойства объекта. Я довольно испорчен использованием jq $ .each, но я не знаю, будет ли это работать в этом случае.

http://jsfiddle.net/6d7L9qpw/1/

Answer 1

Вот функция итератора, чтобы получить, что ключевое значение:

var myData = { 
 
level1: { 
 
    foo: 'hello', 
 
    level2: { 
 
     bar: 'greetings' 
 
    } 
 
} 
 
} 
 

 

 
function recIterator(object, inputKey) { 
 
    for(var key in object) { 
 
     if(typeof object[key] == "object") { 
 
      return recIterator(object[key], inputKey); 
 
     } else { 
 
      if(key==inputKey) { 
 
       return object[key]; 
 
      } 
 
     } 
 
    } 
 
} 
 

 
$(function() { 
 
    
 
    $("input[type=text]").each(function(ele) { 
 
     var key = $(this).attr("name"); 
 
     $(this).val(recIterator(myData, key)); 
 
    }); 
 

 
});

<script type="text/javascript" src="http://code.jquery.com/jquery-1.11.0.js"></script> 
 
<form id="myForm"> 
 
<input name="foo" type="text" /> 
 
<input name="bar" type="text" /> 
 
</form>

надеюсь, что вы можете продолжать здесь :)