0

I have a few localStorage keys that look something like this in dev tools -> storage...

panel_1 {"name":"test_name", "item_1":"test_item", "link_1":"test_link"})

...each panel I have has multiple items and links with a number in its name that increases. I am trying to go through each panel and for the panel I want to get the first item and link to display on a web page then keep looping through until there's no more items or links before doing the same with the next panel. At the moment when I try this it says "undefined". How can I get the correct value? Right now my code looks like this...

var total_keys = localStorage.length;
var panels = [];
var key;
var location = $('#panels .wrapper article:first-child()');

for($i = 0; $i < total_keys; $i++) {
    key = localStorage.key($i);
    if(key.slice(0, 6) === 'panel_') {
        panels.push(key);
    };
};

var total_panels = panels.length;

for(var $i = 0; $i < total_panels; $i++) {
    var panel = JSON.parse(localStorage.getItem(panels[$i]));
    var items = function() {
        for(var $x = 1; $x <= 5; $x++) {
            var item = 'item_'+$x;
            alert(panel.item);
        };
    };

    location.after(items);
};
adiga
  • 34,372
  • 9
  • 61
  • 83
JMR0102
  • 37
  • 6
  • `localStorage.key($i);` <-- what is "key"? I can't recall any `key` prototype in the localStorage API. – briosheje Jun 07 '19 at 12:27
  • @briosheje https://developer.mozilla.org/en-US/docs/Web/API/Storage/key – Mitya Jun 07 '19 at 12:29
  • 1
    @Utkanos Oh, thanks. Never ever seen that before, it's not even mentioned in the API examples. Thanks for sharing. – briosheje Jun 07 '19 at 12:30
  • Why is `items` a function? – adiga Jun 07 '19 at 12:33
  • @adiga because it's used as a callback in `.after` over `location`, which is a jQuery selector. (https://api.jquery.com/after/). The issue is just that `alert(panel.item);` is undefined, it should rather be `alert(panel[item]);` – briosheje Jun 07 '19 at 12:34
  • @briosheje ah, I only checked the first part of the documentation which said the parameter could be *htmlString or Element or Text or Array or jQuery* – adiga Jun 07 '19 at 12:36
  • @adiga yep, that's a "weird" approach, I'm just wondering if panel works properly in that function callback, but it should. – briosheje Jun 07 '19 at 12:38
  • Possible duplicate of [Dynamically access object property using variable](https://stackoverflow.com/questions/4244896/dynamically-access-object-property-using-variable) – adiga Jun 07 '19 at 12:39

1 Answers1

2

I think you mean panel[item] instead of panel.item (which means panel["items"]). It would explain the "undefined" value.

The most inner loop should look like

for(var $x = 1; $x <= 5; $x++) {
    var item = 'item_'+$x;
    alert(panel[item]);
};
Jean-François Fabre
  • 137,073
  • 23
  • 153
  • 219
Julien Barrois
  • 151
  • 9
  • 1
    This is a comment, not an answer to the question. Please use the comments system for that. – Mitya Jun 07 '19 at 12:29
  • 2
    To be fair, your comment actually hints at the correct answer - it's just your wordering sounds more like a request for clarification. Downvote retracted. – Mitya Jun 07 '19 at 12:31