CODEWITHSUNDEEP
javascriptarraysobjectfindkey
Manuel
Manuel

Reputation: 2542

Get object listed in an array

I have an issue to get objects in an array. In my case i have a JSON file with object und its IDs. I want to get an Object by finding its ID. So i want to get the Objekt (101 and 103) for further calculation. (In C++ it would be a map , and then iterate till 101 is found and return.) In Javascript i got that error: "TypeError: region[i][103] is undefined". I dont know what is wrong. Or is there a better way to get an objekt by its id?

Here is a code example:

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<title>Unbenanntes Dokument</title>
</head>

<body>

<div id="results"></div>

<script>
var region = [
  {
  "101": {
    "id":101,
    "name":"Eisenstadt(Stadt)",
    "pop":13485,
    "lat":47.845876,
    "lng":16.518073,
    "FIELD6":"",
    "FIELD7":"" }
  },
  {
  "102": {
    "id":102,
    "name":"Rust(Stadt)",
    "pop":1942,
    "lat":47.803858,
    "lng":16.686788,
    "FIELD6":"",
    "FIELD7":"" }
  },
  {
  "103": {
    "id":103,
    "name":"Eisenstadt-Umgebung",
    "pop":41474,
    "lat":47.85458,
    "lng":16.576139,
    "FIELD6":"",
    "FIELD7":"" }
  }
  ]

 function foo(region)
{   
    for(i=0; i<region.length;i++)   
{

    document.getElementById("results").innerHTML = region[i]["101"]["name"] + " // " + region[i]["103"]["name"];
}
}

foo(region);

  </script>
</body>
</html>

Upvotes: 1

Views: 99

Answers (3)

Oleksandr T.
Oleksandr T.

Reputation: 77482

Try this

function foo(region) {
  function getPropertyByKeys(region, keys, prop) {
    return region.filter(function(el) {
      return keys.indexOf(Object.keys(el).pop()) >= 0;
    }).map(function(el) {
      return el[Object.keys(el).pop()][prop];
    })
  }

  document.getElementById('results').innerHTML = getPropertyByKeys(region, ['101', '103'], 'name').join(' // ');
}

Example

Upvotes: 1

Osama Mohamed
Osama Mohamed

Reputation: 697

try this: 

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<title>Unbenanntes Dokument</title>
</head>
    <body>
        
<div id="results"></div>

<script>
var region = [
  {
  "101": {
    "id":101,
    "name":"Eisenstadt(Stadt)",
    "pop":13485,
    "lat":47.845876,
    "lng":16.518073,
    "FIELD6":"",
    "FIELD7":"" }
  },
  {
  "102": {
    "id":102,
    "name":"Rust(Stadt)",
    "pop":1942,
    "lat":47.803858,
    "lng":16.686788,
    "FIELD6":"",
    "FIELD7":"" }
  },
  {
  "103": {
    "id":103,
    "name":"Eisenstadt-Umgebung",
    "pop":41474,
    "lat":47.85458,
    "lng":16.576139,
    "FIELD6":"",
    "FIELD7":"" }
  }
  ]

 function foo(region)
{   
    for(i=0; i<region.length;i++)   
{

   document.getElementById("results").innerHTML = region[i]["101"]["name"] + " // " + region[(i+2)]["103"]["name"];
   
}
}

foo(region);

  </script>
    </body>
</html>

Upvotes: 0

thanix
thanix

Reputation: 1287

If you observe your for loop 

for(i=0; i<region.length;i++)   
{
    document.getElementById("results").innerHTML = region[i]["101"]["name"] +
    " // " + region[i]["103"]["name"];
}

You are trying to accessing id "103" for i = 0; id "103" doesn't exist, so you get the TypeError.

You could use object enumeration (iterate over object properties), like this: 

function foo(region) {
  var name = '';
  for(var i = 0; i < region.length; i++) {
    for(var o in region[i]) {
      if (region[i].hasOwnProperty(o)) {
         //check for o[id] == 101? 
         name += region[i][o]['name'];
      }
    }    
  }
  document.getElementById("results").innerHTML = name;
}

foo(region);

Upvotes: 1

Related Questions