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

Posted 2023-05-08

【中文标题】如何在laravel中使用json将json数组打印到jquery表？

【英文标题】：how to print json array to jquery table with json in laravel?

【发布时间】：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]。 这个问题怎么出？

【问题讨论】：

请阅读如何提问：***.com/help/how-to-ask 并举一个简单的例子。

帮帮我兄弟我会尽力而为

你需要自己做一些研究。如果没有您确切想要的任何示例，我们将无法为您提供帮助。你目前得到的结果是什么？你到底卡在哪里了？

@Swati "name":"3":"gopal","amt":["amount":74500],"site""18":"gopal1" ,"19":"gopal2"

只有一行，并且站点编号将在下拉列表中显示多个

【参考方案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>