JS, issue with keeping array data in sessionStorage

Question

Here is the problematic code:

let newFriend = event.target.id;
let friends;
if (sessionStorage.getItem('friends') === null || sessionStorage.getItem('friends') === undefined || sessionStorage.getItem('friends') === '') {
    console.log('DEV_NO FRIENDS!sessionStorage[\'friends\']: ' + sessionStorage.getItem('friends'));
    friends = [newFriend];
} else {
    let currentFriends = sessionStorage.getItem('friends').split(',');
    console.log(currentFriends.length);
    // let currentFriends = JSON.parse(sessionStorage.getItem('friends'));
    console.log('DEV_sessionStorage friends: ' + currentFriends);
    console.log('DEV_inArray condition: ' + $.inArray(newFriend, currentFriends));
    if (!($.inArray(newFriend, currentFriends) !== -1)) {
        console.log('DEV_if not in array!');
        friends = currentFriends.push(newFriend);
        console.log('DEV_friends in if: ' + friends);
    }
}
let data = {friends: friends};

It is hooked on image tag. The sessionStorage fills on successful login like so:

if (response['friends'] !== undefined) {
    sessionStorage.setItem('friends', response['friends']);
} else {
    sessionStorage.removeItem('friends');
}

Or is updated like so, if new friend is added:

ajax(url, 'GET', 'none', 'Kinvey', function(response) {
    sessionStorage.setItem('friends', response['friends']);
});

The idea is: a user can add friends to his friends list. The friend is 'PUT' into my app's back-end, inside a column called 'friends'. Then sessionStorage is updated to store the new friend. To my knowledge sessionStorage supports only strings, so I thought lets store the friends as string, separated by ",". Then I would pick that up ('currentFriends') and split that string into array. Then push the next item and send the data back to the server, then update sessionStorage. But I simply cannot do it - I've been trying for over 3 hours now. As you can see with the numerous console.log()s, for some reason I cannot process my data accordingly and I have no idea what am I doing wrong. Sorry for the long post, but I'm really stuck in here..

Bottom line: as @dfasoro kindly explained - when working with REST one should always make sure he keeps his data in JSON strings. My second problem was that array.push() returns integer (length of array) instead of new array.

Answer 1

I hope this will help you, I have helped you refactor your code and removed unneccesaries, I hope the inline comments help you as well.

IMAGE HOOK CODE

let newFriend = event.target.id;
let friends = [];
if (sessionStorage.getItem('friends')) {
    try {
        //this will throw an error if invalid array json is in friends sessionStorage
        friends = JSON.parse(sessionStorage.getItem('friends'));
    }
    catch (e) { }
}

//is friend in the array?
//if not add and store back into sessionStorage
if (friends.indexOf(newFriend) == -1) {
    friends.push(newFriend);
    sessionStorage.setItem('friends', JSON.stringify(friends));
}

let data = {friends: friends};
//continue with your image hook code

LOGIN CODE

//login code
if (response['friends']) {
    sessionStorage.setItem('friends', JSON.stringify(response['friends']));
} else {
    sessionStorage.removeItem('friends');
}

PUT CODE

//update PUT code
ajax(url, 'GET', 'none', 'Kinvey', function(response) {
    sessionStorage.setItem('friends', JSON.stringify(response['friends']));
});

You basically store the data as JSON string and retrieve as JSON object. You also don't need the null, undefined, empty test etc. You are basically trying to test for a falsy value. I also really hope that your response object is a standard JSON object mapped to a friend array and not a comma separated list of friends e.g. {"friends": [4, 5, 3, 2]} and not `{"friends": "4, 5, 3, 2"}"