jsonreactjsiterationlocal-storagestates

React state and JSON and arrays => faulty result


Edit: So, I found the solution to my initial question, which made me realize I have another issue.

It seemed to be easier than I thought

setNumbers(e) {
    e.preventDefault();
    var already_exists = false;
    var ls_data = this.state.storedNumbers;

    var rname = document.getElementById('name').value;
    var rnumb = document.getElementById('nummer').value;
    var ls_key = this.state.ls_key;

    for (key in ls_data) {
        if(ls_data.hasOwnProperty(key) === true) {
            if(ls_data[key].name === rname) {
                if(ls_data[key].Number === rnumb) {
                    already_exists = true;
                }
            }
        }
    }

    if(!already_exists) {
        ls_key++;
        ls_data[ls_key] = {
            name: rname,
            Number: rnumb
        };

        localStorage.setItem("ls_numbers", JSON.stringify(this.state.storedNumbers));
        localStorage.setItem("ls_key", ls_key); 

        this.setState({
            ls_key: localStorage.getItem("ls_key"),
        });

    }
}

But now my issue is, that I can't iterate over it, because it is a nested object and not an array. So .map will not work (this.state.storedNumbers.map is not a function).

Changing storedNumber to an array sadly doesn't solve the issue, as

        ls_data[ls_key] = {
            name: rname,
            Number: rnumb
        };

isn't working in an array. So now my question is. Can I use my ls_key variable to create a name object in my array? Using the code above results in:

[
    null,
    {
        "name" : "Person 1",
        "Number" : "XXXXXXXX"
    },
    {
        "name" : "Person 2",
        "Number" : "XXXXXXXX"
    }
]

while the array should look like:

[
    "1": {
        "name" : "Person 1",
        "Number" : "XXXXXXXX"
    },
    "2": {
        "name" : "Person 2",
        "Number" : "XXXXXXXX"
    }
]

Or is there a way to iterate over the nested JSON result, as .map does for an array?


Solution

  • Alright then, just figured it out myself:

    The reason my data got malformed (initial question), still in the blue about that. I've changed a lot of code and reverted to the original code again, et voila, miraculously it all worked. Can't tell you what the difference was. After that I could easily simplify the code as shown in the edited question.

    To iterate over the data, the code below was my solution. Should you have a more cleaner solution, let me know!

    {this.state.storedNumbers.length < 1
        ?   <li className='list-group-item'><strong>Geen recente nummers...</strong><span className='pull-right'><span className='glyphicon glyphicon-warning glyph-xl'></span></span></li>
        :   Object.keys(this.state.storedNumbers).map((number) => { 
                return (
                    <div className='item' key={number}>
                        <a className='list-group-item list-link'>
                            <strong>{this.state.storedNumbers[number].name}</strong> - ({this.state.storedNumbers[number].Number})
                        </a>
                        <span className='button-delete glyph-xl'>
                            <i className='glyphicon glyphicon-trash glyph-xl' aria-hidden='true'></i>
                        </span>
                    </div>
                )})
    }