JSON returns undefined. (made via laravel controller)

Question

hello I have a json array when I execute $('tbody').html(data.table_data);
in my ajax I get the following return

[{"id":28,"fname":"tester","lname":"testlast","phone":"00000000","email":"[email protected]","address":"Tester 10","country":"TesterCountry","city":"TesterTown","bday":"2222-02-22","username":"admin","password":"1234","access":"Admin","created_at":"2018-10-13 16:34:22","updated_at":"2018-10-14 12:50:26"},{"id":29,"fname":"tester2","lname":"tester2last","phone":"11000000","email":"[email protected]","address":"Testaria 22","country":"TEsterio","city":"Testeriontiown","bday":"8812-09-08","username":"admin","password":"1234","access":"admin","created_at":"2018-10-14 09:16:50","updated_at":"2018-10-14 12:51:26"}][{"id":28,"fname":"tester","lname":"testlast","phone":"00000000","email":"[email protected]","address":"Tester 10","country":"TesterCountry","city":"TesterTown","bday":"2222-02-22","username":"admin","password":"1234","access":"Admin","created_at":"2018-10-13 16:34:22","updated_at":"2018-10-14 12:50:26"},{"id":29,"fname":"tester2","lname":"tester2last","phone":"11000000","email":"[email protected]","address":"Testaria 22","country":"TEsterio","city":"Testeriontiown","bday":"8812-09-08","username":"admin","password":"1234","access":"admin","created_at":"2018-10-14 09:16:50","updated_at":"2018-10-14 12:51:26"}]

and with data.total_data I get the number from all the total records I have

ok So whenever I try to output this data *id:28,fname:tester etc I get undefined.

the code is the following .

   function fetch_customer_data(query = '')
    {
        $.ajax({
            url:"{{ route('index.action') }}",
            method:'GET',
            data:{query:query},
            dataType:'json',
            success:function(data)
            {
                var client_data = '';
                $.each(data,function (key,value) {
                    client_data += '<tr>';
                    client_data += '<td>' +value.id +'</td>';
                    client_data += '<td>' +value.fname+'</td>';
                    client_data += '<td>' +value.lname+'</td>';
                    client_data += '<td>' +value.email+'</td>';
                    client_data += '<td>' +value.phone+'</td>';
                    client_data += '<td>' +value.address+'</td>';
                    client_data += '<td>' +value.country+'</td>';
                    client_data += '<td>' +value.city+'</td>';
                    client_data += '<td>' +value.bday+'</td>';
                    client_data += '<td>' +value.username+'</td>';
                    client_data += '</tr>';
                })


                  $('tbody').html(cleint_data);

                $('#total_records').text(data.total_data);

            }
        })
    }

Edit: I dont know how to provide you with an actual response so I do the next best thing. Ill show you how I generate it. maybe that's where my problem is

function action(Request $request)
{
    if ($request->ajax()) {
        $output = '';
        $query = $request->get('query');
        if ($query != '') {
            $data = DB::table('users')->
            where('fname', 'like', '%' . $query . '%')
                ->orWhere('lname', 'like', '%' . $query . '%')
                ->orWhere('email', 'like', '%' . $query . '%')
                ->orWhere('phone', 'like', '%' . $query . '%')
                ->orWhere('address', 'like', '%' . $query . '%')
                ->orWhere('country', 'like', '%' . $query . '%')
                ->orWhere('city', 'like', '%' . $query . '%')
                ->orWhere('bday', 'like', '%' . $query . '%')
                ->orWhere('username', 'like', '%' . $query . '%')
                ->orWhere('access', 'like', '%' . $query . '%')
                ->orderBy('id', 'desc')
                ->get();
        } else {
            $data = DB::table('users')
                ->orderBy('id', 'asc')
                ->get();
        }
        $total_row = $data->count();
        if ($total_row > 0) {
            foreach ($data as $row) {
                $output .= $data;
            }
        } else {
            $output = '
   <tr>
    <td align="center" colspan="13">No Data Found</td>
   </tr>
   ';
        }
        $datas = array(
            'table_data' => $output,
            'total_data' => $total_row
        );

        echo json_encode($datas);
    }
}

edit Here is the json output

 {table_data: "[{"id":28,"fname":"tester","lname":"testlast","pho…14 09:16:50","updated_at":"2018-10-14 12:51:26"}]", total_data: 2}
table_data: "[{"id":28,"fname":"tester","lname":"testlast","phone":"00000000","email":"[email protected]","address":"Tester 10","country":"TesterCountry","city":"TesterTown","bday":"2222-02-22","username":"admin","password":"1234","access":"Admin","created_at":"2018-10-13 16:34:22","updated_at":"2018-10-14 12:50:26"},{"id":29,"fname":"tester2","lname":"tester2last","phone":"11000000","email":"[email protected]","address":"Testaria 22","country":"TEsterio","city":"Testeriontiown","bday":"8812-09-08","username":"admin","password":"1234","access":"admin","created_at":"2018-10-14 09:16:50","updated_at":"2018-10-14 12:51:26"}][{"id":28,"fname":"tester","lname":"testlast","phone":"00000000","email":"[email protected]","address":"Tester 10","country":"TesterCountry","city":"TesterTown","bday":"2222-02-22","username":"admin","password":"1234","access":"Admin","created_at":"2018-10-13 16:34:22","updated_at":"2018-10-14 12:50:26"},{"id":29,"fname":"tester2","lname":"tester2last","phone":"11000000","email":"[email protected]","address":"Testaria 22","country":"TEsterio","city":"Testeriontiown","bday":"8812-09-08","username":"admin","password":"1234","access":"admin","created_at":"2018-10-14 09:16:50","updated_at":"2018-10-14 12:51:26"}]"
total_data: 2

Try value['id']. You have a typo in $('tbody').html(cleint_data); Can you confirm that this is not in your actual code? — Matthijs
– Matthijs, Commented Oct 14, 2018 at 13:01
There is no property total_data shown in the json so my guess is you aren't showing us the full response structure and that the array shown is also a property of a higher level object we can't see — charlietfl
– charlietfl, Commented Oct 14, 2018 at 13:04
I tried it that as well but nothing changes., I think its cause my array in data.table_data but I dont know where to tell it to look there. — Demeteor
– Demeteor, Commented Oct 14, 2018 at 13:04
So try $.each(data.table_data..... and update question with full structure of the response and fix typo for cleint_data — charlietfl
– charlietfl, Commented Oct 14, 2018 at 13:06
I did try data.table_data it will not even create a row in the table, Also that is the full stracture of data.table_data, $datas = array( 'table_data' => $output, 'total_data' => $total_row ); echo json_encode($datas); — Demeteor
– Demeteor, Commented Oct 14, 2018 at 13:11

SilentCoder · Accepted Answer · 2018-10-14 13:17:58Z

1

According to my observation you have two errors, 1) Your Json result is not properly formatted. 2) You are adding $('tbody').html(cleint_data);, there you misspelled the word client_data

$(document).ready(function(){
// Your json result has an error, So I corrected it and got the output. It has some unrecognized square brackets in the middle with one missing comma. check again
var yourData = jQuery.parseJSON('[{"id":"28","fname":"tester","lname":"testlast","phone":"00000000","email":"[email protected]","address":"Tester 10","country":"TesterCountry","city":"TesterTown","bday":"2222-02-22","username":"admin","password":"1234","access":"Admin","created_at":"2018-10-13 16:34:22","updated_at":"2018-10-14 12:50:26"},{"id":"29","fname":"tester2","lname":"tester2last","phone":"11000000","email":"[email protected]","address":"Testaria 22","country":"TEsterio","city":"Testeriontiown","bday":"8812-09-08","username":"admin","password":"1234","access":"admin","created_at":"2018-10-14 09:16:50","updated_at":"2018-10-14 12:51:26"},{"id":"28","fname":"tester","lname":"testlast","phone":"00000000","email":"[email protected]","address":"Tester 10","country":"TesterCountry","city":"TesterTown","bday":"2222-02-22","username":"admin","password":"1234","access":"Admin","created_at":"2018-10-13 16:34:22","updated_at":"2018-10-14 12:50:26"},{"id":"29","fname":"tester2","lname":"tester2last","phone":"11000000","email":"[email protected]","address":"Testaria 22","country":"TEsterio","city":"Testeriontiown","bday":"8812-09-08","username":"admin","password":"1234","access":"admin","created_at":"2018-10-14 09:16:50","updated_at":"2018-10-14 12:51:26"}]');

var client_data = '';
                $.each(yourData,function (key,value) {
                    client_data += '<tr>';
                    client_data += '<td>' +value.id +'</td>';
                    client_data += '<td>' +value.fname+'</td>';
                    client_data += '<td>' +value.lname+'</td>';
                    client_data += '<td>' +value.email+'</td>';
                    client_data += '<td>' +value.phone+'</td>';
                    client_data += '<td>' +value.address+'</td>';
                    client_data += '<td>' +value.country+'</td>';
                    client_data += '<td>' +value.city+'</td>';
                    client_data += '<td>' +value.bday+'</td>';
                    client_data += '<td>' +value.username+'</td>';
                    client_data += '</tr>';
                })


                  $('tbody').html(client_data);

             //   $('#total_records').text(data.total_data);


});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<table>
<tbody>
</tbody>
</table>

edited Oct 14, 2018 at 13:17

answered Oct 14, 2018 at 13:16

SilentCoder

1,9901 gold badge16 silver badges22 bronze badges

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

19 Comments

charlietfl Over a year ago

Numbers do not require quotes in json and when quoted must be converted to number from string if you intend to work with them as numbers

SilentCoder Over a year ago

Sorry, then it is the square brackets and a mission comma.

charlietfl Over a year ago

@Demeteor until you provide a minimal reproducible example of the json all we will be doing is guessing

charlietfl Over a year ago

Even simpler is open that url in browser address bar with a valid query string and you can see the json output there

Demeteor Over a year ago

Ok I have done what you asked. (btw thanks for the console thingy learned something new today)

|

Demeteor · Accepted Answer · 2018-10-14 14:40:55Z

okay so I would 1st like to give a huge thank you to SilentCode for the help without you I would have never figured out that my Json string was invalid, the site you shared http://json2csharp.com/ showed me where the error in my string was. so I figured out that error on the creation was inside my controller.

 if ($total_row > 0) {
                 foreach ($data as $row) {
                $output .= $data;
            }

Right here $output .= $data; with DOT EQUALS every time the string runs down each row it will add the same string over and over again. (so in case I had 100 records the string would probably be enormous)

to fix that issue all I had to do was to remove the foreach loop (its not needed I had it there when Iw as generating html inside my controller "dont do that its bad as I was told") and also replacign .= to just =

 if ($total_row > 0) {

                $output = $data;
            }

and in my view I just kept the old format I just changed $.each(data,function... to $.each(data.table_data,function... and everything started working normally

              var client_data = '';
              console.log(data);
                $.each(data.table_data,function (key,value) {
                    client_data += '<tr>';
                    client_data += '<td>' + value.id +'</td>';
                    client_data += '<td>' +value.fname+'</td>';
                    client_data += '<td>' +value.lname+'</td>';
                    client_data += '<td>' +value.email+'</td>';
                    client_data += '<td>' +value.phone+'</td>';
                    client_data += '<td>' +value.address+'</td>';
                    client_data += '<td>' +value.country+'</td>';
                    client_data += '<td>' +value.city+'</td>';
                    client_data += '<td>' +value.bday+'</td>';
                    client_data += '<td>' +value.username+'</td>';
                    client_data += '<td>' +value.access+'</td>' ;

                    client_data += '<td> <a href ="users/' + value.id +'/edit" class="btn btn-outline-primary"> Edit </a> </td>' ;
                })


             $('tbody').html(client_data);

In conclusion my Json was being repeated for each record in my DB, and was trying to pull from the wrong part of my object (data) instead of (data.data_table)

Just a quick thing, that json2csharp.com is using to create classes from a json for c# language(.net development). But it can use to check validity of the json structure since it is validate json before creating classes for c#

Collectives™ on Stack Overflow

JSON returns undefined. (made via laravel controller)

2 Answers 2

19 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

19 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related