简体   繁体   中英

Javascript object property 'null' when iterating through an array of objects

I have an array of objects. Somehow, one of the properties goes missing within my each loop. I have tried many different types of loops and nothing resolves this issue.

someFunction(someArrayOfObjects) {
    console.log(someArrayOfObjects); // logs objects as I expect them to be

    $.each(someArrayOfObjects, function(index, someObject) {
        console.log(someObject); // one of the properties of someObject is 'null'
    });
}

UPDATE: How the array is constructed:

// constructor
var people = [];
var Person = function (name, age, photo) {
    this.name = name;
    this.age = age;
    this.photo = null;
};

Then use ajax to get some JSON and create the objects

    success: function(data) {
        people.push(new Person(data['name'], data['age'])
}

Then I iterate through each of those people and make another AJAX request to get each of their photos. The callback looks like this:

function(person, photo) {
    person.photo = photo;
});

I am new to javascript and async programming so wrapping my mind around callbacks was tough. I thought I had figured it out when console.log(someArrayOfObjects) worked as I expected. I just can't figure out why the photo property reverts when the objects are logged individually. I also tried rewriting everything in CoffeeScript because the syntax is a bit easier for me, but unfortunately the issue remains.

Thank you.

Screenshot of console:控制台截图

NEW UPDATE and final answer at last

Below is the sample code, here after all ajax calls are finished then only the buildQuiz() function would be called meaning all data is ready for further use.

$.when( $.ajax( "/page1.php" ), $.ajax( "/page2.php" ) )
  .then( buildQuiz, myFailure );

OLD UPDATE

As of now(might get three times but) just try below code and let me know the log..

function getCastMembers(movieTitle) {
  getNames(movieTitle, function(castMembers) {
    getPhotos(castMembers, function(castMember, photo) {
      castMember.photo = photo;
      buildQuiz(castMembers);
    });
  });
}

OLD UPDATE

So It appears there has to be something going on between first and sceond log statements.

var people = [];
var Person = function (name, age, photo) {
    this.name = name;
    this.age = age;
    this.photo = null;
};
var someArrayOfObjects = [ {name: "joe", age: "32", photo: "joe.jpg"},
{name: "alice", age: "5", photo: "alice.jpg"},{name: "john", age:"22", photo:"john.jpg"}]; 
for(i in someArrayOfObjects){
 people.push(new Person(someArrayOfObjects[i]['name'], someArrayOfObjects[i]['age']))
}

people.forEach(function(person,index){
   person.photo = someArrayOfObjects[index].photo;
})
function somefunction(people){
    console.log(people); // logs objects as I expect them to be
       people.forEach(function(person) {
           console.log(person);
       })
}
somefunction(people);

OUTPUT

VM359:17 [Person, Person, Person]
0: Personage: "32"name: "joe"photo: "joe.jpg"
__proto__: Person1: Person2: Personlength: 3__proto__: Array[0]

VM359:19 Person {name: "joe", age: "32", photo: "joe.jpg"}
VM359:19 Person {name: "alice", age: "5", photo: "alice.jpg"}
VM359:19 Person {name: "john", age: "22", photo: "john.jpg"}

OLD UPDATE

In your success callback of photo data call the function to iterate.

success: function(data) {
     for(){
         person.photo = data.photo;  // maybe something like this
                                     // you have within for loop
                                     // or something
    }
    // so after all persons filled
    // up with photo now call iterator
    somefunction(someArrayOfObjects);
}

OLD ANSWER

Below code works fine. Try it out.

 var someArrayOfObjects = [ {name: "joe", age: "32", photo: "joe.jpg"}, {name: "alice", age: "5", photo: "alice.jpg"}, {name: "john", age: "22", photo: "john.jpg"} ]; function somefunction(someArrayOfObjects){ console.log(someArrayOfObjects); // logs objects as I expect them to be someArrayOfObjects.forEach(function(someObj) { console.log(someObj.name +" "+someObj.age +" "+ someObj.photo); }) } somefunction(someArrayOfObjects); /* outout */ /* joe 32 joe.jpg alice 5 alice.jpg john 22 john.jpg */

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM