Javascript getting object not DOM element

Question

Here is the whole object called "params" shown in Chrome browser console:

{videoSlot: video#videoSlot, slot: div#adSlot}
    slot: div#adSlot
        accessKey: ""
        align: ""
        draggable: false 
        ...

    videoSlot: video#videoSlot
        accessKey: ""
        loop: false
        muted: false 
        ...

when I do console.log(params) the above is what I see. But if I do console.log(params.videoSlot), it shows

<video id="videoSlot" style="position:absolute; width:100%; height:100; ...></video>

which is the DOM element of the video. I want to fetch object's metadata not the DOM element. How can I accomplish this? And why does this happen?

So here is more information

I am writing a code that determines what type of media player a particular ads is playing at. The player information is passed as "params" here.

console.log(videoParams.muted) accesses muted metadata and prints "false".

However, console.log(Object.keys(videoParams)) prints out "[]", empty list

Console.dir(videoParams) seems to print out the metadata I desire, however, I don't know how to capture that metadata information and iterate using Object.keys(videoParams).

export default class MediaPlayerClassifier {
  constructor() {
    // map of events to arrays of pixels
    this.identifier = {
      'goog': 'GOOGLE_MEDIA_PLAYER',
      'yimg': 'YAHOO_MEDIA_PLAYER',
      'zzVpaidVideoPlayer': 'ZZ_MEDIA_PLAYER'
    };
    this.player = null;
  }

  determine(params, callback) {
    videoParams = params.videoSlot
    console.dir(videoParams);
    var identifierKeys = Object.keys(this.identifier);
    var value;
    var that = this;
    Object.keys(videoParams).forEach(function(key) {
      value = videoParams[key];
      console.log(value);
      if (key === 'baseURI') {
        console.log(value);
      }
      for (var i=0; i < identifierKeys.length; i++) {
        var each = identifierKeys[i];
        if (value && typeof value === 'string' && value.indexOf(each) !== -1) {
          that.player = that.identifier[each];
          return callback();
        }
      }
    });
    return;
  }

  getPlayerType() {
    return this.player;
  }
}

What is the desired result? What is the “object’s metadata”? — Sebastian Simon, Jun 18 '18 at 06:34
Can we see the code of the implementation and can you check whether your object is storing the dom element or just the string. — Ullas Hunka, Jun 18 '18 at 06:36
The desired result is the object videoSlot which is {accessKey: "", loop:false, muted: false} because this metadata has information I want to capture. Also, it looks like my object is storing both slot, and video slot metadata not just DOM or string of it. But when I do "params.slot" or "params.videoSlot", it just returns the DOM element not the metadata — Matt Choi, Jun 18 '18 at 06:39
@MattChoi Have you tried `params.videoSlot.loop`, `params.videoSlot.muted`, etc.? What do you think a DOM object is? — Sebastian Simon, Jun 18 '18 at 06:48
Duplicate https://stackoverflow.com/questions/9633835/how-can-i-log-an-html-element-as-a-javascript-object — Jorjon, Jun 18 '18 at 06:49
Console.log makes whatever you pass into it into a string. Since it appears the object you're trying to access (the `videoSlot` object) is a reference to a DOM element object, it stringifies this when you use console.log, which results in the HTML showing up. The object does actually contain the 'metadata', it's just formatting the object in a fancy way. `console.dir` apparently prints the raw object instead, as per the post linked by @Jorjon, so if you really need to print it you can use that. — obermillerk, Jun 18 '18 at 07:15
I just updated the question with code snippets. As @Jorjon pointed out, console.dir indeed prints out what I want in the browser. However, trying to iterate through the videoSlot object by params.videoSlot does not work. What is weird is that it works on Google Vast Inspector, but does not work on Yahoo Vast Inspector. What is happening here? In both cases, params is passed in as object that contains the same formatted information — Matt Choi, Jun 18 '18 at 07:23
@Xufox when I try that, it does print out loop and muted boolean value — Matt Choi, Jun 18 '18 at 07:28

Javascript getting object not DOM element

So here is more information

0 Answers0