Arkadaşlar inputtan veri gönderip json ile veri çekiyorum fakat aşağıdaki görselde belirttiğim gibi fazla girintili olan veriyi çekmiyor undefined hatası alıyorum yardımcı olur musunuz

api.php (backend)

<?php
$type = htmlspecialchars($_POST['type']);



$url= "https://url.com/fruits.php?type=$fruit";

$curl = curl_init($url);
curl_setopt($curl, CURLOPT_URL, $url);
curl_setopt($curl, CURLOPT_RETURNTRANSFER, true);
curl_setopt($curl, CURLOPT_SSL_VERIFYHOST, false);
curl_setopt($curl, CURLOPT_SSL_VERIFYPEER, false);

$resp = curl_exec($curl);
curl_close($curl);

echo $resp;

?>

index.php

<input class="form-control" type="text" name="type" id="type" placeholder="Fruit Type"><br>


 <table id="zero-conf" class="table table-hover" style="width:100%">
   <thead>
     <tr>                                 
       <th>Type</th>
       <th>Number</th>
       <th>Name</th>
       <th>Surname</th>
       <th>Date Time</th>
       <th>City Data</th>
       <th>Street Data</th>
       <th>Friend Name</th>
       <th>Friend Number</th>
       <th>2ND Friend</th>
       <th>2ND Number</th>
       <th>CITIZENSHIP</th>
     </tr>
  </thead>
</table>

javascript(index.php)

function checkNumber() {
 $.Toast.showToast({
     "title": "Wait...",
     "icon": "loading",
     "duration": 7000
 });
 $.ajax({
 url: "../api/fruit/api.php",
 type: "POST",
 data: {
     type: $("#type").val(),
	
 },
 success: (res) => {
     if (res) {
         var json = JSON.parse(res);
      
         $('tbody').html("");
 $.each(json, function(key, value) {
     
     $('tbody').append('<tr>' +
         '<td>' + value.TYPE + '</td>' +
         '<td>' + value.number + '</td>' +
         '<td>' + value.name + '</td>' +
         '<td>' + value.surname + '</td>' +
         '<td>' + value["DATE TIME"] + '</td>' +
         '<td>' + value["CITY DATA"] + '</td>' +
         '<td>' + value["STREET DATA"] + '</td>' +
         '<td>' + value["FRIEND NAME"] + '</td>' +
         '<td>' + value["FRIEND NUMBER"] + '</td>' +
         '<td>' + value["2ND FRIEND"] + '</td>' +
         '<td>' + value["2ND NUMBER"] + '</td>' +
         '<td>' + value.CITIZENSHIP + '</td>' +
         '</tr>');
 });

jsondan gelen veri:
Mavi ile işaretli kısmı çekebiliyorum, ancak kırmızı ile işaretli kısmı çekemiyorum 'tanımsız' hatası alıyorum
Resim için tıkla

Output:
Reism için tıkla