Ajax Data Display fetched from Database

Question

I have a data coming from the database. And Displaying when the ajax function is called. I am able to display it. But, One of the variable is an array data and saved it using implode function. Data is like (a,b,c,d).

Data is displaying in the below format

data1 Data2 Data3 (a,b,c,d) Data5 and so on.

I want to explode the array data and print one below the another.

I should display it like

data1 data2 data3  a  data5
                   b
                   c
                   d

Here is the code which i am written to get the data.

<script type="text/javascript">
                    $('#genreport').on('click',function(){
                    var Representativeid = document.getElementById("Representativeid").value;
                    var dateFrom = document.getElementById("dateFrom").value;
                    var dateTo = document.getElementById("dateTo").value;
                    var url = '{{URL::to('/admin/GenReport')}}';
                    $.ajax({
                      type : 'get',
                      url  : url,
                      data : {Representativeid:Representativeid,dateFrom:dateFrom,dateTo:dateTo},
                      success:function(data){
                        console.log(data);
                        var $tabledata = $('#tbody');
                        $tabledata.empty();
                        for (element in data)
                        {

                          var row = '<tr>' +
                             '<td>' + data[element].date + '</td>'+
                             '<td>' + data[element].doctor_name + '</td>'+
                             '<td>' @foreach(explode(',', data[element].products ) as $product) 
                                {{$product}}    
                             @endforeach '</td>' +
                              '<td>' + data[element].quantity + '</td>'+
                             '<td>' + data[element].locations +'</td>'+
                             '<td>' + data[element].area + '</td>'+
                             '</tr>';
                           $('#tbody').append(row);
                        }
                      },
                      error:function(data)
                      {
                        alert('fail');
                        alert(data);
                      }
                    });
                  });
                </script>

I am failing in the for-each logic. Please help me to display as i expected.

(1) you can’t use a php function/code(serverside) in javascript (clientside). (2) your loop of <td> will break your row structure, unless you use a rowspan on the other row <td>s — Sean
– Sean, Commented Nov 18, 2018 at 16:55
I dont have any error. I can display in a,b,c,d format. But i am not able to explode and print the data one below the other. — Nagendra Bhat
– Nagendra Bhat, Commented Nov 18, 2018 at 16:55
@Sean : Can you guide me with displaying it in required format — Nagendra Bhat
– Nagendra Bhat, Commented Nov 18, 2018 at 16:57

Sean · Accepted Answer · 2018-11-18 18:43:32Z

1

You cannot use a php function/code(server-side) in your javascript/jQuery code(client-side), as the php code will be parsed before the page is loaded. Instead you need to use javascript code.

First, you need to split the value into an array

var productsArray = data[element].products.split(',');

then you would need to get the array count (.length) to use a rowspan, so it doesn't break your table stucture

var rowSpan = productsArray.length;
....
'<td rowspan="'+rowSpan+'">' + data[element].date + '</td>'+
....

finally, you need to loop in javascript, not php, through the array. (note, because the i<0 <td>s go on subsequent rows, you need to add them after)

var rowAfter = "";
for (var i = 0; i < rowSpan; i++) {
  if(i == 0) {
    row += '<td>' + productsArray[i] + '</td>';
  } else {
    rowAfter += '<tr><td>' + productsArray[i] + '</td></tr>';
  }
}

so it would look something like this -

                    for (element in data)
                    {
                      // get products into an array
                      var productsArray = data[element].products.split(',');
                      // get products array count
                      var rowSpan = productsArray.length;

                      var row = '<tr>' +
                         '<td rowspan="'+rowSpan+'">' + data[element].date + '</td>'+
                         '<td rowspan="'+rowSpan+'">' + data[element].doctor_name + '</td>';

                      // loop through products array
                      var rowAfter = "";
                      for (var i = 0; i < rowSpan; i++) {
                        if(i == 0) {
                          row += '<td>' + productsArray[i] + '</td>';
                        } else {
                          rowAfter += '<tr><td>' + productsArray[i] + '</td></tr>';
                        }
                      }

                      row += 
                         '<td rowspan="'+rowSpan+'">' + data[element].quantity + '</td>'+
                         '<td rowspan="'+rowSpan+'">' + data[element].locations +'</td>'+
                         '<td rowspan="'+rowSpan+'">' + data[element].area + '</td>'+
                         '</tr>';
                       // append both row and the <td>s in rowAfter
                       $('#tbody').append(row+rowAfter);
                    }

edited Nov 18, 2018 at 18:43

answered Nov 18, 2018 at 17:45

Sean

12.4k3 gold badges31 silver badges49 bronze badges

Sign up to request clarification or add additional context in comments.

12 Comments

Sean Over a year ago

if you don't want to use rowspan, you can use @OukaashaHabib suggestion of inserting a <table> inside the products <td> instead. End result is similar.

Nagendra Bhat Over a year ago

Thanks a lot for taking a valuable time in rewriting the code and explaining me the things very clearly. Appreciate your help

Nagendra Bhat Over a year ago

Thanks for the help. I have replaced the ajax code. and i am getting the below issue. reports:285 Uncaught ReferenceError: count is not defined at Object.success (reports:285) at i (jquery-2.2.3.min.js:2) at Object.fireWith [as resolveWith] (jquery-2.2.3.min.js:2) at z (jquery-2.2.3.min.js:4) at XMLHttpRequest.<anonymous> (jquery-2.2.3.min.js:4)

Nagendra Bhat Over a year ago

One of google search advised me downgrade the jQuery version. But it didnt help

Sean Over a year ago

that is a php/javascript error on my part. Should be productsArray.length, not count(productsArray), as count() is a php function

|

Oukaasha Habib · Accepted Answer · 2018-11-18 17:44:46Z

0

just add <tr><td> inside foreach.

Edit: Also, take a look at this link. table inside a td

edited Nov 18, 2018 at 17:44

answered Nov 18, 2018 at 16:59

Oukaasha Habib

891 silver badge6 bronze badges

9 Comments

Nagendra Bhat Over a year ago

'<td>' @foreach(explode(',', data[element].products ) as $product) <tr> <td> {{$product}} </td> </tr> @endforeach '</td>' + Does this looks good?

Oukaasha Habib Over a year ago

Yeah. You might have to take care of string concat.

Oukaasha Habib Over a year ago

That is what i meant about string concat. Use + and ''.

Nagendra Bhat Over a year ago

Here is the code i have updated. '<td>' @foreach(explode(',', data[element].products ) as $product) '<tr>''<td>'+{{$product}}+'</td>''</tr>'+ @endforeach '</td>' + Getting Data as undefined. So added them in quotes. And then getting SyntaxError: Unexpected string error. Can you please help me with the code change.

Sean Over a year ago

@OukaashaHabib how is the OP supposed to use php code inside javascript. review stackoverflow.com/questions/13840429/…

|

Collectives™ on Stack Overflow

Ajax Data Display fetched from Database

2 Answers 2

12 Comments

9 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

12 Comments

9 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related