Can't pass variable with JSON objects to for loop

Question

I try to write script to loop through object and return those which type is equal to custom data type set in HTML. Yet im unable to pass variable with array of objects to my for loop. Can you please tell me what am I doing wrong in this code? I receive:

Cannot read property 'length' of undefined

PS. It has to be done in raw JavaScript, no jQuery

var btn = document.getElementById("btn");
var przepisy;

function findData(data) {
    var kuchnia = data.dataset.type;
    var myRequest = new XMLHttpRequest();

    myRequest.onreadystatechange = function() {
        if (this.readyState === 4 && this.status == 200) {

            przepisy = JSON.parse(myRequest.responseText);
        }
    };

    myRequest.open('GET', 'js/przepisy.json');
    myRequest.send();


    for (i = 0; i < przepisy.length; i++) {
        var results = "";
        var obj = przepisy[i];
        var type = przepisy.type;

        if (type === kuchnia) {

            results += obj.name;

            document.write(results);
        }
    }
}

Seems like `przepisy` is not being initialized properly. Can you verify? — 31piy, Dec 05 '16 at 17:27
You're trying to access the results of an asynchronous operation before it has completed. — Pointy, Dec 05 '16 at 17:28
First, include your loop in the success callback function so that there is an object to look at. Second: `przepisy = JSON.parse(myRequest.responseText);` should return an Object, not an array. To find out how many properties are in the object, use `Object.keys(przepisy).length`. Or, if you are really trying to get an array. You need to look into the object at one of its properties where the array you seek is stored. — Scott Marcus, Dec 05 '16 at 17:30

BlackHatSamurai · Accepted Answer · 2016-12-05T17:35:27.180

3

The issue is that you are making the call to your for loop before you get the data back, which is why the length is 0. You should just move the for loop into your response:

   function findData(data) {
        var kuchnia = data.dataset.type;
        var myRequest = new XMLHttpRequest();

           myRequest.onreadystatechange = function() {
            if (this.readyState === 4 && this.status == 200) {

                        przepisy = JSON.parse(myRequest.responseText);

                      for(i = 0; i < Object.keys(przepisy).length; i++) {
                           var results = "";
                           var obj = przepisy[i];
                           var type = przepisy.type;

                           if(type === kuchnia) {

                                results += obj.name;

                                 document.write(results);
                      }
                  }
            }
        };

        myRequest.open('GET','js/przepisy.json');
        myRequest.send();



    }

edited Dec 05 '16 at 17:35

answered Dec 05 '16 at 17:28

BlackHatSamurai

23,275
22
95
156

And, don't use `.length` on an object. Use: `Object.keys(przepisy).length` – Scott Marcus Dec 05 '16 at 17:32
Thank you for very swift answer, errors disappear but now document.write do not fire when i run the function. No results at all. What can be reason for this ? – Ganga Dec 05 '16 at 17:33
@ScottMarcus thanks for the suggestion. I updated the answer. – BlackHatSamurai Dec 05 '16 at 17:35
1

@Ganga `przepisy` is NOT an array of objects. It is an Object that may contain an array of other objects. Do not try to index the object, go into the property that contains the array and index that. – Scott Marcus Dec 05 '16 at 17:37
Yeah you're right :) i just realize that. anyway i found what was wrong. type should be equal to obj.type not przepisy.type Thank you for your help :) – Ganga Dec 05 '16 at 17:43

Can't pass variable with JSON objects to for loop

1 Answers1