javascript array.map函数不起作用

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":"clint.haag@hartmann.info","profile_image":null,"created_at":null,"updated_at":null,"unread":0},{"id":3,"phone":null,"name":"Lina Prosacco","email":"okeefe.camila@gmail.com","profile_image":null,"created_at":null,"updated_at":null,"unread":0},{"id":4,"phone":null,"name":"Miss Aglae Emard DDS","email":"qcarter@yahoo.com","profile_image":null,"created_at":null,"updated_at":null,"unread":0},{"id":5,"phone":null,"name":"Demarco Kilback","email":"kessler.coy@swift.com","profile_image":null,"created_at":null,"updated_at":null,"unread":0},{"id":6,"phone":null,"name":"Tyrell Ziemann Sr.","email":"clementina.kautzer@price.org","profile_image":null,"created_at":null,"updated_at":null,"unread":0},{"id":7,"phone":null,"name":"Ella Hand","email":"areichel@watsica.com","profile_image":null,"created_at":null,"updated_at":null,"unread":0},{"id":8,"phone":null,"name":"Dr. Maxie O'Hara DDS","email":"wallace31@yahoo.com","profile_image":null,"created_at":null,"updated_at":null,"unread":0},{"id":9,"phone":null,"name":"Mrs. Mattie Monahan IV","email":"ernser.pasquale@hotmail.com","profile_image":null,"created_at":null,"updated_at":null,"unread":0},{"id":10,"phone":null,"name":"Bradly Crona","email":"lehner.cordie@pagac.com","profile_image":null,"created_at":null,"updated_at":null,"unread":0},{"id":11,"phone":null,"name":"Orland Kihn","email":"jacobs.wyman@yahoo.com","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.

Answer 1

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.