Get object value by key without using loop

Question

I want to transfer the INI file content uploaded by users to an object and compare this object data with the existing one. Example INI file content is look like this:

Name: Aesthetic
Author: Redon
CursorCentre: 1
CursorExpand: 0
SliderBallFlip: 0
Combo1: 145,229,103
Combo2: 255,213,128

However when I tried to get object itself it is working. But when I tried to get value by key it doesn't work. How can I get value by key in this example?

$(document).on('change','input[name=import]',function(e){
    var settings = {};
    var file = e.target.files[0];
    var reader = new FileReader();
    reader.onload = function(){
        var myText = reader.result;
        var myText = myText.split(/\r?\n/);
        $.each(myText, function(index, val) {
            var item = val.split(":");
            var itemkey = item[0];
            var itemval = $.trim(item[1]);
            settings[itemkey] = itemval;
        });
    }
    reader.readAsText(file);
    console.log(settings); // Works
    console.log(settings['Author']); // undefined
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="file" name="import" accept=".ini">

I assume it's a timing problem. Where exactly in your code are you trying your console logging? It surely won't work outside your reader.onloadfunction. — connexo
– connexo, Commented Aug 3, 2018 at 18:57
I tried logging both inside and outside of the change function and it didn't work. I also tried define object inside change function. It didn't work either. — philos
– philos, Commented Aug 3, 2018 at 19:00
console.log(settings) works outside onload function. So why console.log(settings[key]) doesn't work on the same place? — philos
– philos, Commented Aug 3, 2018 at 19:13
@philos Where do you add the property "Author" to the Object? — Unmitigated
– Unmitigated, Commented Aug 3, 2018 at 19:22

Carsten Massmann · Accepted Answer · 2018-08-03 20:29:56Z

Like @connexo suggested: it is a timing problem. In my slighty changed version I placed the two console.log inside the reader.onload-function and it works!

$(document).on('change','input[name=import]',function(e){
    var settings = {};
    var file = e.target.files[0];
    var reader = new FileReader();
    reader.onload = function(){
        var myText = reader.result;
        var myText = myText.split(/\r?\n/);
        $.each(myText, function(index, val) {
            var item = val.split(":");
            var itemkey = item[0];
            var itemval = $.trim(item[1]);
            settings[itemkey] = itemval;
        });
        console.log(settings); // really works
        console.log(settings['Author']); // works too!
    }
    reader.readAsText(file);
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="file" name="import" accept=".ini">

Note

When I say: "a timing problem" then that is strictly speaking not the whole truth. The object settings will only be available inside the $('document').on('change'...)-function, and only after reader.onload() has done its work. If you want to have the content stored in a global variable (for later reference, maybe by another function ...) then you need to place the var settings={}; outside of your $('document').on('change'...)-function or use something like window['settings']={}; or window.settings={};.

@cars10m Thanks, it works! But It's really confusing, that I can retrieve whole data of object outside reader.onload but specific value by key.

Collectives™ on Stack Overflow

Get object value by key without using loop

1 Answer 1

1 Comment

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Linked

Related