how to display json object with two array in html by using two for loops
<p>I have this form: </p>

<p><a href="https://i.stack.imgur.com/Vne7s.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/Vne7s.png" alt="Form image"></a></p>

<p>Personal details in storing into personal table and book into book table.</p>

<p>The table is linked by the <code>Id</code> field in personal table and <code>UserId</code> field in book table. 
5 books can be inserted against 1 personal information. userId of 5 books records will be same as personal information Id.</p>

<p>So, now to the problem: </p>

<p>I am echoing both tables data as json array (2 arrays) in php and wanted to display it in html via loop. 
Personal information is getting displayed but books are not displaying. It might also be possible that my approach is not good.
So, please give me some good alternative if you have any.</p>

<p><strong>JSON data:</strong></p>

<pre><code>{
   "personaldetails":[
      {
         "id":"79",
         "FirstName":"Elon",
         "MiddleName":"",
         "LastName":"Musk",
         "Gender":"Male",
         "Location":"New York",
         "Email":"elonmusk@tesla.com",
         "Mobile":"1234567890"
      },
      {
         "id":"78",
         "FirstName":"Elon",
         "MiddleName":"",
         "LastName":"Musk",
         "Gender":"Male",
         "Location":"New York",
         "Email":"elonmusk@tesla.com",
         "Mobile":"1234567890"
      },
      {
         "id":"77",
         "FirstName":"Elon",
         "MiddleName":"",
         "LastName":"Musk",
         "Gender":"Male",
         "Location":"New York",
         "Email":"elonmusk@tesla.com",
         "Mobile":"1234567890"
      },
      {
         "id":"76",
         "FirstName":"Elon",
         "MiddleName":"",
         "LastName":"Musk",
         "Gender":"Male",
         "Location":"New York",
         "Email":"elonmusk@tesla.com",
         "Mobile":"1234567890"
      },
      {
         "id":"75",
         "FirstName":"Elon",
         "MiddleName":"",
         "LastName":"Musk",
         "Gender":"Male",
         "Location":"New York",
         "Email":"elonmusk@tesla.com",
         "Mobile":"1234567890"
      },
      {
         "id":"74",
         "FirstName":"Elon",
         "MiddleName":"",
         "LastName":"Musk",
         "Gender":"Male",
         "Location":"New York",
         "Email":"elonmusk@tesla.com",
         "Mobile":"1234567890"
      },
      {
         "id":"73",
         "FirstName":"Elon",
         "MiddleName":"",
         "LastName":"Musk",
         "Gender":"Male",
         "Location":"New York",
         "Email":"elonmusk@tesla.com",
         "Mobile":"1234567890"
      },
      {
         "id":"72",
         "FirstName":"Elon",
         "MiddleName":"",
         "LastName":"Musk",
         "Gender":"Male",
         "Location":"New York",
         "Email":"elonmusk@tesla.com",
         "Mobile":"1234567890"
      },
      {
         "id":"71",
         "FirstName":"Elon",
         "MiddleName":"",
         "LastName":"Musk",
         "Gender":"Male",
         "Location":"New York",
         "Email":"elonmusk@tesla.com",
         "Mobile":"1234567890"
      },
      {
         "id":"70",
         "FirstName":"Elon",
         "MiddleName":"",
         "LastName":"Musk",
         "Gender":"Male",
         "Location":"New York",
         "Email":"elonmusk@tesla.com",
         "Mobile":"1234567890"
      },
      {
         "id":"69",
         "FirstName":"Elon",
         "MiddleName":"",
         "LastName":"Musk",
         "Gender":"Male",
         "Location":"New York",
         "Email":"elonmusk@tesla.com",
         "Mobile":"1234567890"
      },
      {
         "id":"68",
         "FirstName":"Elon",
         "MiddleName":"",
         "LastName":"Musk",
         "Gender":"Male",
         "Location":"New York",
         "Email":"elonmusk@tesla.com",
         "Mobile":"1234567890"
      }
   ],
   "bookdetails":[
      {
         "UserId":"79",
         "BookTitle":"who am i",
         "BookGenre":"inspiration",
         "BookWriter":"modi",
         "BookDescription":"this book is all about the struggle one faces all his life.no matter what he does he never get any attention"
      },
      {
         "UserId":"79",
         "BookTitle":"a walk to remember",
         "BookGenre":"romance",
         "BookWriter":"peter",
         "BookDescription":"a wall in the rainy season where all "
      },
      {
         "UserId":"78",
         "BookTitle":"who am i",
         "BookGenre":"inspiration",
         "BookWriter":"modi",
         "BookDescription":"this book is all about the struggle one faces all his life.no matter what he does he never get any attention"
      },
      {
         "UserId":"78",
         "BookTitle":"a walk to remember",
         "BookGenre":"romance",
         "BookWriter":"peter",
         "BookDescription":"a wall in the rainy season where all "
      },
      {
         "UserId":"77",
         "BookTitle":"who am i",
         "BookGenre":"inspiration",
         "BookWriter":"modi",
         "BookDescription":"this book is all about the struggle one faces all his life.no matter what he does he never get any attention"
      },
      {
         "UserId":"77",
         "BookTitle":"a walk to remember",
         "BookGenre":"romance",
         "BookWriter":"peter",
         "BookDescription":"a wall in the rainy season where all "
      },
      {
         "UserId":"76",
         "BookTitle":"who am i",
         "BookGenre":"inspiration",
         "BookWriter":"modi",
         "BookDescription":"this book is all about the struggle one faces all his life.no matter what he does he never get any attention"
      },
      {
         "UserId":"76",
         "BookTitle":"a walk to remember",
         "BookGenre":"romance",
         "BookWriter":"peter",
         "BookDescription":"a wall in the rainy season where all "
      },
      {
         "UserId":"75",
         "BookTitle":"who am i",
         "BookGenre":"inspiration",
         "BookWriter":"modi",
         "BookDescription":"this book is all about the struggle one faces all his life.no matter what he does he never get any attention"
      },
      {
         "UserId":"75",
         "BookTitle":"a walk to remember",
         "BookGenre":"romance",
         "BookWriter":"peter",
         "BookDescription":"a wall in the rainy season where all "
      },
      {
         "UserId":"74",
         "BookTitle":"who am i",
         "BookGenre":"inspiration",
         "BookWriter":"modi",
         "BookDescription":"this book is all about the struggle one faces all his life.no matter what he does he never get any attention"
      },
      {
         "UserId":"74",
         "BookTitle":"a walk to remember",
         "BookGenre":"romance",
         "BookWriter":"peter",
         "BookDescription":"a wall in the rainy season where all "
      },
      {
         "UserId":"73",
         "BookTitle":"who am i",
         "BookGenre":"inspiration",
         "BookWriter":"modi",
         "BookDescription":"this book is all about the struggle one faces all his life.no matter what he does he never get any attention"
      },
      {
         "UserId":"73",
         "BookTitle":"a walk to remember",
         "BookGenre":"romance",
         "BookWriter":"peter",
         "BookDescription":"a wall in the rainy season where all "
      }
   ]
}
</code></pre>

<p><strong>PHP API:</strong></p>

<pre><code> $personal = $db-&gt;prepare('select Id,FirstName,MiddleName,LastName,Gender,Location,Email,Mobile from personaldetails ORDER BY Id DESC');
    $personal-&gt;execute();
    $json_data=array();



    foreach($personal as $row)//foreach loop  
    {  

        $json_array['id']=$row['Id'];  
        $json_array['FirstName']=$row['FirstName'];  
        $json_array['MiddleName']=$row['MiddleName'];  
        $json_array['LastName']=$row['LastName']; 
        $json_array['Gender']=$row['Gender']; 
        $json_array['Location']=$row['Location']; 
        $json_array['Email']=$row['Email']; 
        $json_array['Mobile']=$row['Mobile'];
        array_push($json_data,$json_array);  

}  

    $books = $db-&gt;prepare('select UserId,BookTitle,BookGenre,BookWriter,BookDescription from bookdetails ORDER BY UserId Desc'); 
    $books-&gt;execute();
    $json_data1=array();

     //$bookNo = 0;
    foreach($books as $row)//foreach loop  
    {  
        //$bookNo++;
        //$json_array1['BookNo']= $bookNo;  
        $json_array1['UserId']=$row['UserId']; 
        $json_array1['BookTitle']=$row['BookTitle']; 
        $json_array1['BookGenre']=$row['BookGenre'];  
        $json_array1['BookWriter']=$row['BookWriter']; 
        $json_array1['BookDescription']=$row['BookDescription']; 

    //here pushing the values in to an array  
    array_push($json_data1,$json_array1);  

}  

    header('Content-type: application/json');
    echo json_encode(array("personaldetails"=&gt;$json_data,"bookdetails"=&gt;$json_data1));
</code></pre>

<p><strong>JavaScript in HTML</strong></p>

<pre><code>&lt;script&gt;
    $.getJSON(url, function(data) {
        if (data) {
            var personalArr = (data.personaldetails).length;
            console.log(personalArr);
            var bookArr = (data.bookdetails).length;
            console.log(bookArr);
            for (var i = 0; i &lt; personalArr; i++) {
                var a = data.personaldetails[i].Id;
                $("#personalDiv").append('&lt;div&gt;' + '&lt;p&gt;' + 'FirstName:' + data.personaldetails[i].FirstName + 
                                         '&lt;br/&gt;' + 'MiddleName:' + data.personaldetails[i].MiddleName + 
                                         '&lt;br/&gt;' + 'LastName:' + data.personaldetails[i].LastName + 
                                         '&lt;br/&gt;' + 'Location:' + data.personaldetails[i].Location + 
                                         '&lt;br/&gt;' + 'Email:' + data.personaldetails[i].Email + 
                                         '&lt;br/&gt;' + 'Mobile:' + data.personaldetails[i].Mobile + '&lt;br/&gt;' + '&lt;/p&gt;' + '&lt;/div&gt;');
                for (var j = 0; j &lt; bookArr; j++) {
                    var b = data.bookdetails[j].UserId;
                    if (a == b) {
                        $("#personalDiv").append('&lt;div&gt;' + '&lt;p&gt;' + 'BookTitle:' + data.bookdetails[j].BookTitle + 
                                                 '&lt;br/&gt;' + 'BookGenre:' + data.bookdetails[j].BookGenre + 
                                                 '&lt;br/&gt;' + 'BookWriter:' + data.bookdetails[j].BookWriter + 
                                                 '&lt;br/&gt;' + 'BookDescription:' + data.bookdetails[j].BookDescription + 
                                                 '&lt;br/&gt;' + '&lt;/p&gt;' + '&lt;/div&gt;');
                    }
                }
            }
        }
        console.log(data);
        alert("Roger that" + JSON.stringify(data));
    });

    $(function() {
        loadData();
    });
&lt;/script&gt;
&lt;div class="grid" id="postjson"&gt;&lt;/div&gt;
&lt;div class="grid" id="personalDiv"&gt;&lt;/div&gt;
</code></pre>

<p>Please give me some alternative solution two cause but my approach is very time consuming at large data context.</p>

<p>here is my desired output( all in single html div) :</p>

<p><a href="https://i.stack.imgur.com/Sl0zX.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/Sl0zX.png" alt="enter image description here"></a></p>