javascript array.map function not working

Question

I am using laravel and vuejs to create a chat app. I have encrypted my response in laravel by doing like this as I do not want anyone to see my response in console also:-

public function get()
{
    $contacts = User::where('id', '!=', auth()->id())->get();

    $unreadIds = Message::select(\DB::raw('`from` as sender_id,count(`from`) as messages_count'))
        ->where('to', auth()->id())
        ->where('read', false)
        ->groupBy('from')
        ->get();

    $contacts = $contacts->map(function($contact) use ($unreadIds) {
        $contactUnread = $unreadIds->where('sender_id', $contact->id)->first();

        $contact->unread = $contactUnread ? $contactUnread->messages_count : 0;

        return $contact;
    });

    $contacts = base64_encode($contacts);
    return response()->json($contacts);
}

Now when I wish to access this value to display data in vue js, I am doing something like this:-

axios.get(this.globalUrl+'/contacts')
            .then((response) => {
                let encryptData = atob(response.data);
                console.log(encryptData);

                //data received after de-converting
               /*[{"id":2,"phone":null,"name":"Casimir Morar MD","email":"[email protected]","profile_image":null,"created_at":null,"updated_at":null,"unread":0},{"id":3,"phone":null,"name":"Lina Prosacco","email":"[email protected]","profile_image":null,"created_at":null,"updated_at":null,"unread":0},{"id":4,"phone":null,"name":"Miss Aglae Emard DDS","email":"[email protected]","profile_image":null,"created_at":null,"updated_at":null,"unread":0},{"id":5,"phone":null,"name":"Demarco Kilback","email":"[email protected]","profile_image":null,"created_at":null,"updated_at":null,"unread":0},{"id":6,"phone":null,"name":"Tyrell Ziemann Sr.","email":"[email protected]","profile_image":null,"created_at":null,"updated_at":null,"unread":0},{"id":7,"phone":null,"name":"Ella Hand","email":"[email protected]","profile_image":null,"created_at":null,"updated_at":null,"unread":0},{"id":8,"phone":null,"name":"Dr. Maxie O'Hara DDS","email":"[email protected]","profile_image":null,"created_at":null,"updated_at":null,"unread":0},{"id":9,"phone":null,"name":"Mrs. Mattie Monahan IV","email":"[email protected]","profile_image":null,"created_at":null,"updated_at":null,"unread":0},{"id":10,"phone":null,"name":"Bradly Crona","email":"[email protected]","profile_image":null,"created_at":null,"updated_at":null,"unread":0},{"id":11,"phone":null,"name":"Orland Kihn","email":"[email protected]","profile_image":null,"created_at":null,"updated_at":null,"unread":0}]*/

                let finalArray = encryptData.map(function (obj) {
                    return obj;
                    //this.contacts.push(obj);

                });
                console.log(finalArray);
                this.contacts = finalArray;
            });

Here I am getting the data in the encryptData variable as an array of objects but proceeding further, every time I am getting this error:-

Uncaught (in promise) TypeError: encryptData.map is not a function

Please help me in finding the solution thanks.

please provide the result of invoking the console.log(encryptData) — Tu Nguyen
– Tu Nguyen, Commented Oct 7, 2018 at 12:07
@NguyễnThanhTú I have edited the question and added the response. Please have a look — Varun.Kumar
– Varun.Kumar, Commented Oct 7, 2018 at 12:14
@informant09 It re-converts the data into original form. I have converted the data with help of base64_encode() in laravel — Varun.Kumar
– Varun.Kumar, Commented Oct 7, 2018 at 12:16

Jeto · Accepted Answer · 2018-10-07 13:31:44Z

3

You're probably missing a JSON.parse call:

axios.get(this.globalUrl + '/contacts')
  .then((response) => {
    let encryptData = JSON.parse(atob(response.data));
    let finalArray = encryptData.map(function(obj) {
      // ...
    });
    this.contacts = finalArray;
  });

Basically:

your PHP script returns the base64-encoded data, in JSON format,
axios.get's callback receives this as a base64-encoded string,
atob base64-decodes the string (it's still a string at this point),
JSON.parse transforms it back into the actual data.

edited Oct 7, 2018 at 13:31

answered Oct 7, 2018 at 12:16

Jeto

15k2 gold badges39 silver badges50 bronze badges

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

2 Comments

Varun.Kumar Over a year ago

thank you so much it worked but can you please explain the logic behind it of using JSON.parse

Varun.Kumar Over a year ago

Thanks for this knowledge and info.

Collectives™ on Stack Overflow

javascript array.map function not working

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related