Визуализация json с родительским дочерним форматом json

Question

У меня есть html-файл, в который поступают данные для родителя и потомка из json, мне нужно рендерить здесь только с родителем и конкретным потомком, я пробовал здесь, но только первый родитель и потомок идут как parent1-child11child12, ноМне нужен здесь parent1-child11 child12, parent2-child2, parent1-child3, например, от json. Вот код ниже или вы можете проверить plunkr http://plnkr.co/edit/KhFhW4Z3Kk4QwvRDr1pX?p=preview

html

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> 
<div class="col-md-3" id="leftNavBar">
<div class="applybutton"><button class="applybtn" type="button">Appply</button></div> 
<div><span class="parent"></span>-<span class="child"></span></div>
</div>

скрипт

  $(".applybtn").click(function(){
    $.ajax({
          type: "GET",
          url: '1.json',
          success: function(result) {
           console.log(result[0].value);

           $('.parent').append(result[0].name);
            $('.child').append(result[0].value);
          }
        });
      });