如何在laravel中使用json将json数组打印到jquery表？答案

【问题标题】：how to print json array to jquery table with json in laravel?如何在laravel中使用json将json数组打印到jquery表？
【发布时间】：2021-08-14 16:30:02
【问题描述】：

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>

通过从下拉列表中选择客户名称来显示表格，数据来自数据库 customername in function store () 我必须将 customername 和 projectname 列放在表中
站点编号应该放在我尝试使用 data[0][0]['3'] 之类的索引号的选择框中但是有没有办法确定下一个键？？它在表中显示[Object object]。这个问题怎么出？

【问题讨论】：

请阅读如何提问：stackoverflow.com/help/how-to-ask 并举一个简单的例子。
帮帮我兄弟我会尽力而为
你需要自己做一些研究。如果没有您确切想要的任何示例，我们将无法为您提供帮助。你目前得到的结果是什么？你到底卡在哪里了？
@Swati {"name":{"3":"gopal"},"amt":[{"amount":74500}],"site"{"18":"gopal1" ,"19":"gopal2"}}
只有一行，并且站点编号将在下拉列表中显示多个

标签： php jquery json laravel

【解决方案1】：

由于只有 1 行，因此您无需使用 .each 循环，您可以直接使用键检索 json 的值，对于 sites，因为会有多个值，您可以使用 .each 循环进行迭代通过您的 jsons 并在您的选择框中附加选项

演示代码：

$('#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>

【讨论】：