how to print json array to jquery table with json in laravel?

Question

public function store( $customername)
{

$projectname=DB::table("selectproject")->where("customername",$customername)->pluck("projectname","id");

    $paidamount = DB::table("payment")->where("projectname",$projectname)->sum("amount","id");

    $sitenumber = DB::table("sites")->where("projectname",$projectname)->pluck("sitenumber","id");

    $array = array(  $projectname, $paidamount,  $sitenumber);

    return json_encode($array);
 }


  my blade file 

@include('projects.home')

 <form action="{{ route('siteallocate.store') }}" method="post" >
 @csrf

   <div class="col-xs-12 col-sm-12 col-md-12">

      <div class="form-group">

      <strong>Select customer :</strong>

      <select class="form-control" name="customername">
           <option selected="true" disabled="disabled"  >--Select--</option>

    @foreach ($data as $row)

        <option class="form-control" value="{{$row->customername  }}" >{{ $row->customername }}     
       </option>

 @endforeach
</select>
</div>

</div>
<div id="tableview" >

 </div>

 </form>


     <script>
        jQuery(document).ready(function (){


          jQuery('select[name="customername"]').on('change',function(){

           var alreadyAdded = [];

                   var categoryID = jQuery(this).val();
                   if(categoryID)

                   {
                       
                      jQuery.ajax({
                          
                         url : '/hi/'+categoryID,
                         type : "GET",
                         dataType : "json",
                         success:function(data)
                         {
                        
                       
                         $('#tableview').html("")

                            jQuery.each(data, function(key,value){

                             //if(data === null) { alert('empty') } // skip nulls


                            
                            
                            
                             if ($.inArray(this.value, alreadyAdded) !== -1) { return;  }

                              $('#tableview').html("")
                               $('#tableview').append('<table class="table table-bordered" > 
 <tr > 
class="bg-info"> <th> Customername </th> <th> Projectname </th> <th> Amount </th>  <th> Sitenumber 
</th>  </tr>

  <tr>??
 <td> ' + categoryID+'</td>   <td> ' +data[0][0]+'</td>  <td> ' + data[0][1]+'</td>  <td> <div 
 class="col-xs-12 col-sm-12 col-md-12">  <select class="form-control"   > <option> ' + 
 data[0][3]+'</option>  </select> </div> </td>   
</tr>    </table>');

                              alreadyAdded.push(this.value);

                            });
                         }
                      });
                   }
                  
                });

              });

            
        </script>

Display table by selecting the customername from the dropdown and the data come from database against customername in function store () i have to place the customername and projectname column in the table
sitenumber should be placed in selectbox i tried with data[0][0]['3'] like index number but Is there is no way to determine the next key ?? its shows [Object object ] in the table . How to issue this problem?

Answer 1

As there will be only 1 row so you do no need to use .each loop you can retrieve value of json using key directly and for sites as there will be mutliple values you can use .each loop to iterate through your jsons and append option inside your select-box

Demo Code :

$('#tableview').html("")
//suppose return data look like this
var data = {
  "name": {
    "3": "gopal"
  },
  "amt": [{
    "amount": 74500
  }],
  "site": {
    "18": "gopal1",
    "19": "gopal2",
    "20": "gopal3"
  }
}
$('#tableview').append('<table class="table table-bordered"><tr class = "bg-info"><th> Projectname </th> <th> Amount </th><th> Sitenumber </th></tr>')
//append new row
$('#tableview table').append("<tr><td></td><td></td><td><select></select></td></tr>")
//add text to first td
$('#tableview tr:last td:eq(0)').text(data["name"][Object.keys(data["name"])])
//add amt to 2nd td
$('#tableview tr:last td:eq(1)').text(data["amt"][0]["amount"])
//loop through sites..
$.each(data["site"], function(key, value) {
  //append options
  $('#tableview tr:last select').append("<option value=" + key + ">" + value + "</option>")
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<div id="tableview"></div>