Picking up JSON data

Question

I've got a calendar. Each of its cells (= days) contains

    <span class="spanEvent"></span>
    <span class="spanDate"></span>
    <span class="spanParticipants"></span>
    <span class="spanDescription"></span>

So, I need my earlier stored data (localStorage.setItem) to appear within those < spans >.

My code (see below) seems not to work. So, how do I do it?

I created a JSON object and made it an array. Each value of the array contains data for a certain day in the calendar. "thisCell" is my target cell which I am clicking to retrieve the stored data.

    var organizer = [
        //February 9, 2015
        {thisCell.getElementsByClassName("spanEvent")[0].value: JSON.parse('localStorage.getItem("event")'),
         thisCell.getElementsByClassName("spanDate")[0].value: JSON.parse('localStorage.getItem("date")'),
         thisCell.getElementsByClassName("spanParticipants")[0].value: JSON.parse('localStorage.getItem("participants")'),
         thisCell.getElementsByClassName("spanDescription")[0].value: JSON.parse('localStorage.getItem("description")')
        },

        //July 22, 2016
        {thisCell.getElementsByClassName("spanEvent")[0].value: JSON.parse('localStorage.getItem("event")'),
         thisCell.getElementsByClassName("spanDate")[0].value: JSON.parse('localStorage.getItem("date")'),
         thisCell.getElementsByClassName("spanParticipants")[0].value: JSON.parse('localStorage.getItem("participants")'),
         thisCell.getElementsByClassName("spanDescription")[0].value: JSON.parse('localStorage.getItem("description")')
        }
      ]; 

Answer 1

I believe you have a misunderstanding on how to access and modify dom element's content.

Your code will do nothing, because you are just creating an object, not actually accessing a dom's element properties, also, <span> elements don't use the value property to access it's content, they use, as most HTMLElements do, the innerHTML property.

Also, the JSON.parse(string) method will convert a string into a JavaScript Object{} which, in your case, I believe it's not necessary, given that you are trying to assign that value to a <span> , it should be a string, right?

So, with that in mind, I've created a fiddle illustrating what I think you want to do.

HTML

<div class="cell"> 
 <span class="spanEvent"></span>
 <span class="spanDate"></span>
 <span class="spanParticipants"></span>
 <span class="spanDescription"></span>
</div>

JavaScript

localStorage.setItem("event", "someEv");
localStorage.setItem("date", "someDate");
localStorage.setItem("participants", "someParticipants");
localStorage.setItem("desc", "someDesc");

cell = document.querySelector(".cell");
spanEv = cell.querySelector(".spanEvent");
spanDate = cell.querySelector(".spanDate");
spanPart = cell.querySelector(".spanParticipants");
spanDesc = cell.querySelector(".spanDescription");

spanEv.innerHTML = localStorage.getItem("event");
spanDate.innerHTML = localStorage.getItem("date");
spanPart.innerHTML = localStorage.getItem("participants");
spanDesc.innerHTML = localStorage.getItem("desc");

Note: I've used the querySelector() method to get the cell and it's elements, but feel free to use any dom selection technique you prefer ( getElementsByClassName() is by far faster).

Hope it helps!