Best way to find nested property by name in object

Question

I have an object (dataLayer), which can increase and decrease in length, depending on how many pages you've visited.

I want to:

Loop through the objective and look for the property name "ecommerce".
I specifically want to find the value of "brandcode".
Must be in the same object group as "pagetitle: `Login Page"

Obviously, I can do dataLayer['4'].ecommerce.information. product. However, the problem I have this that this key/value position could be at any number. EG dataLayer[0],[1],[2],[12] etc

What is the best way to loop through this object and look for this key/value pair, regardless of it's index in the object?

const dataLayer = 
  { 0: { a: 123, event: 'pageload', productId: 1 } 
  , 1: { b: 456, event: 'pageload', productId: 3 } 
  , 2: {         event: 'gtm.load', productId: 3 } 
  , 3: {         event: 'gtm.load', productId: 4 } 
  , 4: 
    { pagetitle: 'Login Page'
    , ecommerce: 
      { information: 
        { product: 
          [ { brandCode: 'car', productColor: 'red' } 
          , { brandCode: 'car', productColor: 'green' } 
          , { brandCode: 'car', productColor: 'yello' } 
          ]   
  } } } };

Thanks,

@RokoC.Buljan It was just an example, you can ignore (I've updated it with another example). — Reena Verma, Dec 14 '20 at 13:19
After you parse the data, what is the expected output? An array? — Roko C. Buljan, Dec 14 '20 at 13:22
Probably all the best practices to iterate objects are collected into this answer: https://stackoverflow.com/a/11922384/1169519 — Teemu, Dec 14 '20 at 13:23
PS, your `product {[{ brandCode: "car", productColor: "red" }];}` is an invalid Object - it has no *key* - Please do your best to post a valid entry data and explain the expected output — Roko C. Buljan, Dec 14 '20 at 13:24
`Object.keys()` will give you an array of object's keys. You can iterate over the keys and look for a key named `ecommerce` in the corresponding value of each key in the array. — Yousaf, Dec 14 '20 at 13:25
`{[{ brandCode: "car", productColor: "red" }];}` is still invalid after your second edit — Roko C. Buljan, Dec 14 '20 at 13:28
@ReenaVerma Nope, it's a syntax error, the array in the object must have a key. — Teemu, Dec 14 '20 at 13:28
@RokoC.Buljan - I get that, this is just an example. I'm trying to get the theory right. Any ideas, would be helpful — Reena Verma, Dec 14 '20 at 13:29
@RokoC.Buljan - I've taken this from a real working example. It's a nested object, products is an array, which contains 3 other data entries. — Reena Verma, Dec 14 '20 at 13:34
@mister jojo please refrain from modifying invalid data posted by OP. And use the default formatter. Thank you. — Roko C. Buljan, Dec 14 '20 at 13:38
@RokoC.Buljan and wher are the coma ? your dataLayer is not a valid js object — Mister Jojo, Dec 14 '20 at 13:40
@MisterJojo sorry it was a wrong [Revision Rollback](https://stackoverflow.com/posts/65289663/revisions) — Roko C. Buljan, Dec 14 '20 at 13:41
@ReenaVerma thank you for specifying that `products` is an Array — Roko C. Buljan, Dec 14 '20 at 13:42

Mister Jojo · Answer 1 · 2020-12-14T23:55:56.827

this way with for( of ) and for( in )

const dataLayer = 
  { 0: { a: 123, event: 'pageload', productId: 1 } 
  , 1: { b: 456, event: 'pageload', productId: 3 } 
  , 2: {         event: 'gtm.load', productId: 3 } 
  , 3: {         event: 'gtm.load', productId: 4 } 
  , 4: 
    { pagetitle: 'Login Page' , fx:false, trduc: { madchin: 'bidule'}
    , ecommerce: 
      { information: 
        { product: 
          [ { brandCode: 'car', productColor: 'red'   } 
          , { brandCode: 'car', productColor: 'green' } 
          , { brandCode: 'car', productColor: 'yello' } 
          ]   
  } } } }
  ;
for (let key in dataLayer) // key value are '0','1',...,'4'
  {
  if ( 'ecommerce' in dataLayer[key]
    && dataLayer[key]?.pagetitle==='Login Page'
    ) {
    for (let prod of dataLayer[key].ecommerce.information.product)
      {
      console.log( prod.brandCode, prod.productColor )
  } } }

.as-console-wrapper { max-height: 100% !important; top: 0; }

[edit]

I have added a verification on pagetitle==='Login Page' see Optional chaining (?.)
and corrected the test on the existence of the ecommerce property see in operator

@ReenaVerma I have added a verification on `pagetitle==='Login Page'` ;) (ES10 JS code) — Mister Jojo, Dec 14 '20 at 23:57

score 1 · Answer 2 · answered Dec 14 '20 at 14:01

To retrieve an array of brandcodes from specifically "Login Page"

const dataLayer = {
  0: {event: 'pageload', productId: 1, a: 123},
  1: {event: 'pageload', productId: 3, b: 456},
  2: {event: 'gtm.load', productId: 3},
  3: {event: 'gtm.load', productId: 4},
  4: {
    pagetitle: 'Login Page',
    ecommerce: {
      information: {
        product: [
          {brandCode: 'car', productColor: 'red'},
          {brandCode: 'truck', productColor: 'green'},
          {brandCode: 'bike', productColor: 'yello'},
        ]
      }
    }
  },
  17: {
    pagetitle: 'Login Page',
    ecommerce: {
      information: {
        product: [
          {brandCode: 'cow', productColor: 'lila'},
        ]
      }
    }
  }
};


function getEcommerceBrandCodes(pagetitle, data) {
  return Object.entries(data).reduce((a, [k, ob]) => {
    const isPagetitle = ob.hasOwnProperty("pagetitle") && ob.pagetitle === pagetitle;
    const isEcommerce = ob.hasOwnProperty("ecommerce");
    if (isPagetitle && isEcommerce) {
      a.push(ob.ecommerce.information?.product?.map(item => item.brandCode));
    }
    return a;
  }, []).flat();
}

console.log(getEcommerceBrandCodes("Login Page", dataLayer));

score 1 · Accepted Answer · edited Sep 09 '22 at 12:47

I had to strip out ES6, as the tool I'm using only allows ES5. But with this solution, I can take the last entry/update of ecommerce.information to the dataLayer, by adding it into a new array and then slicing the last entry.

var productArray = [];

for (var i = 0; i < dataLayer.length; i++) {
    if (dataLayer[i].ecommerce) {
        for (var line in dataLayer[i].ecommerce.information) {
            var itemProducts = dataLayer[i].ecommerce.information;
            productArray.push(itemProducts);
        };
    };
};

var lastItem = productArray.slice(-1);

if (lastItem[0].product[0].brandCode === "car") {
    //do something
} else {
    //do something
}

Roko C. Buljan's solution is also helpful, as this is isolated to the pagetitle, which I will also playaround with as well.

Thanks everyone!

Best way to find nested property by name in object

3 Answers3

Linked

Related