CODEWITHSUNDEEP
javascriptangular
Rachelle
Rachelle

Reputation: 79

loop through objects and find specified properties

I have an array of objects. A typical object looks like:

{
  id: x
  name: y
  employeeInfo: {
    employeeNumber: x
    startDate: x
  }
  salary: x
}

Now I'm trying to loop through it and get the name, employeeNumber and salary.

My column variable, to be used in the loop, is:

public columns: Array<any> = [
  {title: 'id', name: 'id'},
  {title: 'employeeInfo.employeeNumber', name: 'employeeInfo.employeeNumber'},
  {title: 'salary', name: 'salary'}]

I'm trying to loop with

item[column.name]

but of course this would result in item['emplyeeInfo.employeeNumber'], which would result in a undefined.

Can someone help?

Upvotes: 0

Views: 50

Answers (5)

kevinSpaceyIsKeyserS&#246;ze
kevinSpaceyIsKeyserS&#246;ze

Reputation: 4370

try this:

var myObject = {
  id: "x",
  name: "y",
  employeeInfo: {
    employeeNumber: "inner employeeNumber",
    startDate: "inner date",
  },
  salary: "x"
}

for(var id in myObject) {
   if(typeof myObject[id] === "object") {
      for(var innerId in myObject[id]){
         console.log(innerId + ": " + myObject[id][innerId]);
      }
   } else {
    console.log(id + " " + myObject[id]);
   }
}

Upvotes: 0

Rachelle
Rachelle

Reputation: 79

I ended up using a "simplify" approach. i.e. filter through the array, grab what I need, put it in a new object, put it in a temporary array and finally replace the complex array with the simple array.

Upvotes: 0

Arg0n
Arg0n

Reputation: 8423

Something like this:

var employees = [
  {
    id: 1,
    name: 'Charlie',
    employeeInfo: {
      employeeNumber: 123,
      startDate: '2017-01-23'
    },
    salary: 2500
  },
  {
    id: 2,
    name: 'John',
    employeeInfo: {
      employeeNumber: 456,
      startDate: '2017-02-26'
    },
    salary: 3500
  }
];

var columns = [
  {title: 'id', name: 'id'},
  {title: 'employeeInfo.employeeNumber', name: 'employeeInfo.employeeNumber'},
  {title: 'salary', name: 'salary'}
];
  
function buildTable() {
  var table = $("<table>");
  var header = $("<tr>");
  for(var i = 0; i < columns.length; i++) {
    header.append("<th>" + columns[i].title + "</th>");
  }
  table.append(header);
  for(var i = 0; i < employees.length; i++) {
    var employee = employees[i];
    var row = $("<tr>");
    for(var y = 0; y < columns.length; y++) {
      var properties = columns[y].name.split('.');
      var value = employee;
      for(var x = 0; x < properties.length; x++) {
        value = value[properties[x]];
      }
      row.append("<td>" + value + "</td>");
    }
    table.append(row);
  }
  $("#result").append(table);
}

buildTable();
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="result"></div>

Upvotes: 1

CD..
CD..

Reputation: 74096

You can split the column name and reduce, like:

column.name.split('.').reduce((res, part) => res[part], item)

split returns an array (in our case ['employeeInfo', 'employeeNumber']) so we can reduce that array using the item as the initialValue.

The reduce() method applies a function against an accumulator and each element in the array (from left to right) to reduce it to a single value.

Upvotes: 1

sjahan
sjahan

Reputation: 5940

Can't you just parse/split the name on the dot and for each part, you get the object, fetch its property and reiterate while there is a next property to fetch?

Upvotes: 0

Related Questions