CODEWITHSUNDEEP
javascriptarraysdictionaryprinting
DisabledWhale
DisabledWhale

Reputation: 861

How to print key and values from dictionaries enlisted in array, javascript

I am having difficulties printing data from dictionaries stored in an array using double for-loop with 

var residents = [{name: "Pyrus", room: "32"},{name: "Ash Ketchum", room: "22"}];

function people() {
    for (let i = 0; i < residents.length; i++) {
        for (let j in residents[i]) {
            document.write(j + ": " + residents[j] + "<br>");
        }
    }
};

people();

What I am retrieving is this: 

name: undefined 
room: undefined
name: undefined
room: undefined

I can print the key but it seems like it does not fetch value defined to the key! What am I doing wrong?

A success criteria is to print in HTML.

Upvotes: 2

Views: 12651

Answers (6)

Sladix
Sladix

Reputation: 702

You need to access residents[i][j] since you are iterating residents in the first place.

so your code becomes :

document.write(j + ": " + residents[i][j] + "<br>");

See this working js fiddle

You could also write it like this :

function people(){
    residents.forEach(r => {
        for(let j in r){
          document.write(j + ": " + r[j] + "<br>");
      }
    })
}

Hope this helps.

Upvotes: 0

lealceldeiro
lealceldeiro

Reputation: 14958

Using a regular for-loop it would go like the below code. Also, I strongly recommend you to check if all the properties (j) are own properties (with hasOwnProperty), otherwise this will look up in the prototype chain. This can be a problem if the objects are added to the array dynamically, otherwise you can bypass this check.

var residents = [{name:"Pyrus",room:"32"},{name: "Ash Ketchum",room:"22"}];

function people() {
  for (let i = 0; i < residents.length; i++) {
    for (let j in residents[i]) {
      if (residents[i].hasOwnProperty(j)) { // <-- check if it is an own property!
        document.write(j + ": " + residents[i][j] + "<br>");
        //first access the object in residents[i], for example {name: "Pyrus",room: "32"}, then to its properties-values with residents[i][j]
      }
    }
  }
};

people();

Upvotes: 0

Mark
Mark

Reputation: 92440

You can avoid some of the for loops and make the code a little easier to read using forEach and Object.entries:

var residents = [{name: "Pyrus", room: "32"},{name: "Ash Ketchum", room: "22"}];

residents.forEach(res => {
    Object.entries(res).forEach(([key, value]) => {
    console.log(key + ": " + value ); //subing console.log so it prints here
    //document.write(key + ": " + value + "<br>");
    })
})

Upvotes: 0

NullPointer
NullPointer

Reputation: 7368

This is the simplest way I think(Use foreach()):

var residents = [{name: "Pyrus", room: "32"},{name: "Ash Ketchum", room: "22"}];

function people() {
    residents.forEach(function(resident) {
 document.write(resident.name + ": " + resident.room + "<br>");
});

}
people();

Upvotes: 2

A l w a y s S u n n y
A l w a y s S u n n y

Reputation: 38502

why not try like this with forEach()

var residents = [{
  name: "Pyrus",
  room: "32"
}, {
  name: "Ash Ketchum",
  room: "22"
}];

function people(residents) {
  residents.forEach((element) => {
    for (var key in element) {
      if (element.hasOwnProperty(key)) {
        console.log(key + ':' + element[key]);
      }
    }
  });

};
people(residents);

Upvotes: 1

James Bass Davies
James Bass Davies

Reputation: 408

You have chained two loops together so your function needs to access the parents index then the property that you wish to reference. 

function people() {
    for (let i = 0; i < residents.length; i++) {
        for (let j in residents[i]) {
            document.write(j + ": " + residents[i][j] + "<br>");
        }
    }
};

Upvotes: 2

Related Questions