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 `` will break your row structure, unless you use a `rowspan` on the other row ``s — Sean, Nov 18 '18 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, Nov 18 '18 at 16:55
@Sean : Can you guide me with displaying it in required format — Nagendra Bhat, Nov 18 '18 at 16:57

Sean · Answer 1 · 2018-11-18T18:43:32.683

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 '18 at 18:43

answered Nov 18 '18 at 17:45

Sean

12,443
3
29
47

if you don't want to use `rowspan`, you can use @OukaashaHabib suggestion of inserting a `` inside the products `
` instead. End result is similar.
– Sean Nov 18 '18 at 17:49
Thanks a lot for taking a valuable time in rewriting the code and explaining me the things very clearly. Appreciate your help – Nagendra Bhat Nov 18 '18 at 17:51
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. (jquery-2.2.3.min.js:4) – Nagendra Bhat Nov 18 '18 at 18:10
One of google search advised me downgrade the jQuery version. But it didnt help – Nagendra Bhat Nov 18 '18 at 18:13
that is a php/javascript error on my part. Should be `productsArray.length`, not `count(productsArray)`, as `count()` is a php function – Sean Nov 18 '18 at 18:19
Yup. Errors are cleared. But the table is skipping to display the products. Have copied the same code inside the for loop. Some where need modification in loop though products array print – Nagendra Bhat Nov 18 '18 at 18:24
I have attached an image which shows the console data display and what i could display after this code change – Nagendra Bhat Nov 18 '18 at 18:30
add your image to your question, not as an edit to my answer – Sean Nov 18 '18 at 18:34
Aha, Sorry. Edited the question. Can you please look into it. – Nagendra Bhat Nov 18 '18 at 18:37
it doesn't look like it is doing the loop `for (var i = 0; i < rowSpan; i++){ ...`. Can you add a `alert(rowSpan);` or `console.log(rowSpan);` right after `var rowSpan = productsArray.length;` to debug that it is giving an array count larger than 0? – Sean Nov 18 '18 at 18:58
Added console.log. And getting 15 undefined results. Database OP's are 15 rows and Its in loop. So getting 15. But unfortunately, getting Undefined. logged the products, and products are splitting without any issues – Nagendra Bhat Nov 18 '18 at 19:05
Hey. That was my spelling issue. Sorry for my bad. Getting it displayed now. Thanks a lot for the help. I really appreciate for your long help. And keeping in touch till the end. – Nagendra Bhat Nov 18 '18 at 19:14

Oukaasha Habib · Answer 2 · 2018-11-18T17:44:46.847

0

just add <tr><td> inside foreach.

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

edited Nov 18 '18 at 17:44

answered Nov 18 '18 at 16:59

Oukaasha Habib

89
1
6

'' @foreach(explode(',', data[element].products ) as $product) {{$product}} @endforeach '' + Does this looks good? – Nagendra Bhat Nov 18 '18 at 17:01
Yeah. You might have to take care of string concat. – Oukaasha Habib Nov 18 '18 at 17:02
That is what i meant about string concat. Use `+` and `''`. – Oukaasha Habib Nov 18 '18 at 17:08
Here is the code i have updated. '' @foreach(explode(',', data[element].products ) as $product) ''''+{{$product}}+''''+ @endforeach '' + 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. – Nagendra Bhat Nov 18 '18 at 17:12
1

@OukaashaHabib how is the OP supposed to use php code inside javascript. review https://stackoverflow.com/questions/13840429/what-is-the-difference-between-client-side-and-server-side-programming – Sean Nov 18 '18 at 17:13
@Sean Thanks for pointing that out. LOL. In that case, javascript loop should be used. – Oukaasha Habib Nov 18 '18 at 17:19
@NagendraBhat Use Sean's suggestion. – Oukaasha Habib Nov 18 '18 at 17:21
@OukaashaHabib :Thanks for the suggestion. I am not able to reproduce the code using rowspan. I would be really thankful if i get the code help – Nagendra Bhat Nov 18 '18 at 17:32
@NagendraBhat Alongwith ``, another `` tag is to be used. Like this: `

` – Oukaasha Habib Nov 18 '18 at 17:41

Ajax Data Display fetched from Database

2 Answers2