Get dynamic div data properly with jQuery

Question

I'm a newbie coder. I need to parse some JSON that is extracted from a page with jQuery. I can obtain the desired information from the div, but I'm unable to process it as I need a specific preloadImageURIs field. Here is my code and the console log I got. Any help will be appreciated.

(function($){
  $(document).ready(function(){
    console.log('Extension Started!');

    var el = $(document).find('#stories_tray');
      if( el.length > 0 ){
        console.log(el);
      }
      child = el.find('._827c');
        console.log(child);
        $.each(child, function(i){
          var div = $(child[i]);
          console.log(div);
          var l = JSON.parse(div.find('._7h4p')
            .attr('data-onkeypress'));
            console.log(l);
        });
  });
}(jQuery));

console log of the l div elements found on DOM and JSON parsed

[{…}]
0:
a: Array(1)
0:
bucketID: "1921598911247563"
event: {__event: 1}
index: 1
item: {__elem: 1}
preloadImageURIs: Array(3) // <= I need the arrays field
0: "https://scontent-mxp1-1.xx.fbcdn.net/v/t1.0-9/69780485_2441252579294828_8876286521255133184_o.jpg?_nc_cat=108&_nc_oc=AQmlW6GFkruaEVfXc9eF72TGUmeYNrbcMi4NhtMwnYKY3jHZ2PfEGtuRrLw1zW3tKL8&_nc_ht=scontent-mxp1-1.xx&oh=35a387eb224b40a53fa9843f2dea96ea&oe=5E0476EE"
1: "https://scontent-mxp1-1.xx.fbcdn.net/v/t1.0-9/fb50/69486769_2441252732628146_164259843119513600_n.jpg?_nc_cat=105&_nc_oc=AQlY1PsI20i3QfCgj4y5HNI3ouTO3Omja80UnllPyg4QtwkeQXHsBTt_FpZhLhTUN1Q&_nc_ht=scontent-mxp1-1.xx&oh=ffdec3a02ba1625765c30145d74bce5b&oe=5E0A8BB1"
2: "https://scontent-mxp1-1.xx.fbcdn.net/v/t1.0-0/fb10/s235x350/69220266_2441252575961495_7888583749871337472_n.jpg?_nc_cat=109&_nc_oc=AQlY0yR_UpynhU27e5ojqEplSoapKMoJMPaUgqH6JH_S3WddZg5Mrr-yy6PI_W-AU-E&_nc_ht=scontent-mxp1-1.xx&oh=e85647164edc3d7eaaefb22f06c80660&oe=5DC8BBA1"
length: 3
__proto__: Array(0)
preloadVideoIDs: []
source: null
traySessionID: "ff3939d3-6318-4834-a2e3-283f993f6b40"
__proto__: Object
length: 1
__proto__: Array(0)
k: "stories-tray"
meth: "onStoryTrayItemSelect"
mod: "FBStoriesTray2"
__proto__: Object
length: 1
__proto__: Array(0)

// .div console log

r.fn.init [div._827c]
0: div._827c
accessKey: ""
align: ""
assignedSlot: null
attributeStyleMap: StylePropertyMap {size: 0}
attributes: NamedNodeMap {0: data-onmouseover, 1: class, data-onmouseover: data-onmouseover, class: class, length: 2}
autocapitalize: ""
baseURI: "https://www.facebook.com/"
childElementCount: 1
childNodes: NodeList [div._7h4p]
children: HTMLCollection [div._7h4p]
classList: DOMTokenList ["_827c", value: "_827c"]
className: "_827c"
clientHeight: 201
clientLeft: 0
clientTop: 0
clientWidth: 113
contentEditable: "inherit"
dataset: DOMStringMap {onmouseover: "[{"mod":"FBStoriesTray2","meth":"onMouseOverStoryTrayItem"}]"}
dir: ""
draggable: false
firstChild: div._7h4p
firstElementChild: div._7h4p
hidden: false
id: ""
innerHTML: "<div data-onkeypress="[{&quot;mod&quot;:&quot;FBStoriesTray2&quot;,&quot;meth&quot;:&quot;onStoryTrayItemSelect&quot;,&quot;k&quot;:&quot;stories-tray&quot;,&quot;a&quot;:[{&quot;item&quot;:{&quot;__elem&quot;:1},&quot;bucketID&quot;:&quot;1807193582626548&quot;,&quot;traySessionID&quot;:&quot;462fb7d0-e57d-4ee5-9ae9-e0e638644463&quot;,&quot;index&quot;:0,&quot;preloadImageURIs&quot;:[&quot;https:\/\/scontent-mxp1-1.xx.fbcdn.net\/v\/t15.5256-10\/67557518_10218681899669860_5427076471422189568_n.jpg?_nc_cat=104&amp;_nc_oc=AQli_eGw3pHwSIuWZe0li7ozuj6cbwv8mIDH-2xx5J7KlaVDdbeSlZLxb58yqXzZgeg&amp;_nc_ht=scontent-mxp1-1.xx&amp;oh=ee1b01f4bb4b920a380e1813bfa63459&amp;oe=5DD6E037&quot;,null,&quot;https:\/\/scontent-mxp1-1.xx.fbcdn.net\/v\/t15.5256-10\/fb10\/s235x350\/67557518_10218681899669860_5427076471422189568_n.jpg?_nc_cat=104&amp;_nc_oc=AQli_eGw3pHwSIuWZe0li7ozuj6cbwv8mIDH-2xx5J7KlaVDdbeSlZLxb58yqXzZgeg&amp;_nc_ht=scontent-mxp1-1.xx&amp;oh=58905f74ac74bd1c6dcd2190b75ce4ea&amp;oe=5DD5A1F2&quot;],&quot;preloadVideoIDs&quot;:[],&quot;event&quot;:{&quot;__event&quot;:1},&quot;source&quot;:null}]}]" data-onclick="[{&quot;mod&quot;:&quot;FBStoriesTray2&quot;,&quot;meth&quot;:&quot;onStoryTrayItemSelect&quot;,&quot;k&quot;:&quot;stories-tray&quot;,&quot;a&quot;:[{&quot;item&quot;:{&quot;__elem&quot;:1},&quot;bucketID&quot;:&quot;1807193582626548&quot;,&quot;traySessionID&quot;:&quot;462fb7d0-e57d-4ee5-9ae9-e0e638644463&quot;,&quot;index&quot;:0,&quot;preloadImageURIs&quot;:[&quot;https:\/\/scontent-mxp1-1.xx.fbcdn.net\/v\/t15.5256-10\/67557518_10218681899669860_5427076471422189568_n.jpg?_nc_cat=104&amp;_nc_oc=AQli_eGw3pHwSIuWZe0li7ozuj6cbwv8mIDH-2xx5J7KlaVDdbeSlZLxb58yqXzZgeg&amp;_nc_ht=scontent-mxp1-1.xx&amp;oh=ee1b01f4bb4b920a380e1813bfa63459&amp;oe=5DD6E037&quot;,null,&quot;https:\/\/scontent-mxp1-1.xx.fbcdn.net\/v\/t15.5256-10\/fb10\/s235x350\/67557518_10218681899669860_5427076471422189568_n.jpg?_nc_cat=104&amp;_nc_oc=AQli_eGw3pHwSIuWZe0li7ozuj6cbwv8mIDH-2xx5J7KlaVDdbeSlZLxb58yqXzZgeg&amp;_nc_ht=scontent-mxp1-1.xx&amp;oh=58905f74ac74bd1c6dcd2190b75ce4ea&amp;oe=5DD5A1F2&quot;],&quot;preloadVideoIDs&quot;:[],&quot;event&quot;:{&quot;__event&quot;:1},&quot;source&quot;:null}]}]" class="_7h4p" tabindex="0" style="width:113px; height: 201px;background-color: #C0E3F0FF"><div class="_816s" id="u_ps_0_7_0"></div><div class="uiScaledImageContainer _7h4s" style="width:113px;height:201px;"><img class="scaledImageFitWidth img" src="https://scontent-mxp1-1.xx.fbcdn.net/v/t15.5256-10/p228x119/67557518_10218681899669860_5427076471422189568_n.jpg?_nc_cat=104&amp;_nc_oc=AQli_eGw3pHwSIuWZe0li7ozuj6cbwv8mIDH-2xx5J7KlaVDdbeSlZLxb58yqXzZgeg&amp;_nc_ht=scontent-mxp1-1.xx&amp;oh=d63805f57b71cac235c5bc6c38efc781&amp;oe=5E137F61" data-src="https://scontent-mxp1-1.xx.fbcdn.net/v/t15.5256-10/p228x119/67557518_10218681899669860_5427076471422189568_n.jpg?_nc_cat=104&amp;_nc_oc=AQli_eGw3pHwSIuWZe0li7ozuj6cbwv8mIDH-2xx5J7KlaVDdbeSlZLxb58yqXzZgeg&amp;_nc_ht=scontent-mxp1-1.xx&amp;oh=d63805f57b71cac235c5bc6c38efc781&amp;oe=5E137F61" style="top:-6px;" alt="" width="113" height="214"></div><span class="_7h4q"><div class="_7lf_ _26w4 _26w9 _26wu size-small"><div class="uiScaledImageContainer _26w6"><img class="scaledImageFitWidth img" src="https://scontent-mxp1-1.xx.fbcdn.net/v/t1.0-1/c0.0.80.80a/p80x80/67867821_10218556902225002_3156177329013653504_n.jpg?_nc_cat=111&amp;_nc_oc=AQn_zY5vFLq_ml1M0bJfZi1T3z3m7dnDJRi3kvzv7fR1Y65KGDSRyYvJFBX22_lGzjc&amp;_nc_ht=scontent-mxp1-1.xx&amp;oh=c2e6943593c7c0993432e5dbe17bdb79&amp;oe=5DD174EE" data-src="https://scontent-mxp1-1.xx.fbcdn.net/v/t1.0-1/c0.0.80.80a/p80x80/67867821_10218556902225002_3156177329013653504_n.jpg?_nc_cat=111&amp;_nc_oc=AQn_zY5vFLq_ml1M0bJfZi1T3z3m7dnDJRi3kvzv7fR1Y65KGDSRyYvJFBX22_lGzjc&amp;_nc_ht=scontent-mxp1-1.xx&amp;oh=c2e6943593c7c0993432e5dbe17bdb79&amp;oe=5DD174EE" alt="" width="40" height="40" data-ft="{&quot;tn&quot;:&quot;-^&quot;}" itemprop="image"></div><span class="img _55ym _55yq _55yo _26ww" aria-busy="true" role="progressbar" aria-valuemin="0" aria-valuemax="100" aria-valuetext="Caricamento..."></span></div><svg class="_7lg0" height="42" width="42"><g class="_7lim"><circle class="_7lg1" cx="21" cy="21" fill="none" r="19" stroke="#4080ff" stroke-width="4"></circle></g></svg></span><span class="_7h4r"><div class="_mx9 wrap light verbose"><div class="_mxb" dir="auto"><span class="_nbt"><div id="u_ps_0_7_1"><div class="_4ik4 _4ik5" style="-webkit-line-clamp: 3;">Lucia Ladybug Cordella</div></div></span></div></div></span></div>"
innerText: "Lucia Ladybug Cordella"
inputMode: ""
isConnected: true
isContentEditable: false
lang: ""
lastChild: div._7h4p
lastElementChild: div._7h4p
localName: "div"
namespaceURI: "http://www.w3.org/1999/xhtml"
nextElementSibling: div._827c
nextSibling: div._827c
nodeName: "DIV"
nodeType: 1
nodeValue: null
nonce: ""
offsetHeight: 201
offsetLeft: 132
offsetParent: div._nyb
offsetTop: 40
offsetWidth: 113
onabort: null
onauxclick: null
onbeforecopy: null
onbeforecut: null
onbeforepaste: null
onblur: null
oncancel: null
oncanplay: null
oncanplaythrough: null
onchange: null
onclick: null
onclose: null
oncontextmenu: null
oncopy: null
oncuechange: null
oncut: null
ondblclick: null
ondrag: null
ondragend: null
ondragenter: null
ondragleave: null
ondragover: null
ondragstart: null
ondrop: null
ondurationchange: null
onemptied: null
onended: null
onerror: null
onfocus: null
onfullscreenchange: null
onfullscreenerror: null
ongotpointercapture: null
oninput: null
oninvalid: null
onkeydown: null
onkeypress: null
onkeyup: null
onload: null
onloadeddata: null
onloadedmetadata: null
onloadstart: null
onlostpointercapture: null
onmousedown: null
onmouseenter: null
onmouseleave: null
onmousemove: null
onmouseout: null
onmouseover: null
onmouseup: null
onmousewheel: null
onpaste: null
onpause: null
onplay: null
onplaying: null
onpointercancel: null
onpointerdown: null
onpointerenter: null
onpointerleave: null
onpointermove: null
onpointerout: null
onpointerover: null
onpointerup: null
onprogress: null
onratechange: null
onreset: null
onresize: null
onscroll: null
onsearch: null
onseeked: null
onseeking: null
onselect: null
onselectionchange: null
onselectstart: null
onstalled: null
onsubmit: null
onsuspend: null
ontimeupdate: null
ontoggle: null
onvolumechange: null
onwaiting: null
onwebkitfullscreenchange: null
onwebkitfullscreenerror: null
onwheel: null
outerHTML: "<div data-onmouseover="[{&quot;mod&quot;:&quot;FBStoriesTray2&quot;,&quot;meth&quot;:&quot;onMouseOverStoryTrayItem&quot;}]" class="_827c"><div data-onkeypress="[{&quot;mod&quot;:&quot;FBStoriesTray2&quot;,&quot;meth&quot;:&quot;onStoryTrayItemSelect&quot;,&quot;k&quot;:&quot;stories-tray&quot;,&quot;a&quot;:[{&quot;item&quot;:{&quot;__elem&quot;:1},&quot;bucketID&quot;:&quot;1807193582626548&quot;,&quot;traySessionID&quot;:&quot;462fb7d0-e57d-4ee5-9ae9-e0e638644463&quot;,&quot;index&quot;:0,&quot;preloadImageURIs&quot;:[&quot;https:\/\/scontent-mxp1-1.xx.fbcdn.net\/v\/t15.5256-10\/67557518_10218681899669860_5427076471422189568_n.jpg?_nc_cat=104&amp;_nc_oc=AQli_eGw3pHwSIuWZe0li7ozuj6cbwv8mIDH-2xx5J7KlaVDdbeSlZLxb58yqXzZgeg&amp;_nc_ht=scontent-mxp1-1.xx&amp;oh=ee1b01f4bb4b920a380e1813bfa63459&amp;oe=5DD6E037&quot;,null,&quot;https:\/\/scontent-mxp1-1.xx.fbcdn.net\/v\/t15.5256-10\/fb10\/s235x350\/67557518_10218681899669860_5427076471422189568_n.jpg?_nc_cat=104&amp;_nc_oc=AQli_eGw3pHwSIuWZe0li7ozuj6cbwv8mIDH-2xx5J7KlaVDdbeSlZLxb58yqXzZgeg&amp;_nc_ht=scontent-mxp1-1.xx&amp;oh=58905f74ac74bd1c6dcd2190b75ce4ea&amp;oe=5DD5A1F2&quot;],&quot;preloadVideoIDs&quot;:[],&quot;event&quot;:{&quot;__event&quot;:1},&quot;source&quot;:null}]}]" data-onclick="[{&quot;mod&quot;:&quot;FBStoriesTray2&quot;,&quot;meth&quot;:&quot;onStoryTrayItemSelect&quot;,&quot;k&quot;:&quot;stories-tray&quot;,&quot;a&quot;:[{&quot;item&quot;:{&quot;__elem&quot;:1},&quot;bucketID&quot;:&quot;1807193582626548&quot;,&quot;traySessionID&quot;:&quot;462fb7d0-e57d-4ee5-9ae9-e0e638644463&quot;,&quot;index&quot;:0,&quot;preloadImageURIs&quot;:[&quot;https:\/\/scontent-mxp1-1.xx.fbcdn.net\/v\/t15.5256-10\/67557518_10218681899669860_5427076471422189568_n.jpg?_nc_cat=104&amp;_nc_oc=AQli_eGw3pHwSIuWZe0li7ozuj6cbwv8mIDH-2xx5J7KlaVDdbeSlZLxb58yqXzZgeg&amp;_nc_ht=scontent-mxp1-1.xx&amp;oh=ee1b01f4bb4b920a380e1813bfa63459&amp;oe=5DD6E037&quot;,null,&quot;https:\/\/scontent-mxp1-1.xx.fbcdn.net\/v\/t15.5256-10\/fb10\/s235x350\/67557518_10218681899669860_5427076471422189568_n.jpg?_nc_cat=104&amp;_nc_oc=AQli_eGw3pHwSIuWZe0li7ozuj6cbwv8mIDH-2xx5J7KlaVDdbeSlZLxb58yqXzZgeg&amp;_nc_ht=scontent-mxp1-1.xx&amp;oh=58905f74ac74bd1c6dcd2190b75ce4ea&amp;oe=5DD5A1F2&quot;],&quot;preloadVideoIDs&quot;:[],&quot;event&quot;:{&quot;__event&quot;:1},&quot;source&quot;:null}]}]" class="_7h4p" tabindex="0" style="width:113px; height: 201px;background-color: #C0E3F0FF"><div class="_816s" id="u_ps_0_7_0"></div><div class="uiScaledImageContainer _7h4s" style="width:113px;height:201px;"><img class="scaledImageFitWidth img" src="https://scontent-mxp1-1.xx.fbcdn.net/v/t15.5256-10/p228x119/67557518_10218681899669860_5427076471422189568_n.jpg?_nc_cat=104&amp;_nc_oc=AQli_eGw3pHwSIuWZe0li7ozuj6cbwv8mIDH-2xx5J7KlaVDdbeSlZLxb58yqXzZgeg&amp;_nc_ht=scontent-mxp1-1.xx&amp;oh=d63805f57b71cac235c5bc6c38efc781&amp;oe=5E137F61" data-src="https://scontent-mxp1-1.xx.fbcdn.net/v/t15.5256-10/p228x119/67557518_10218681899669860_5427076471422189568_n.jpg?_nc_cat=104&amp;_nc_oc=AQli_eGw3pHwSIuWZe0li7ozuj6cbwv8mIDH-2xx5J7KlaVDdbeSlZLxb58yqXzZgeg&amp;_nc_ht=scontent-mxp1-1.xx&amp;oh=d63805f57b71cac235c5bc6c38efc781&amp;oe=5E137F61" style="top:-6px;" alt="" width="113" height="214"></div><span class="_7h4q"><div class="_7lf_ _26w4 _26w9 _26wu size-small"><div class="uiScaledImageContainer _26w6"><img class="scaledImageFitWidth img" src="https://scontent-mxp1-1.xx.fbcdn.net/v/t1.0-1/c0.0.80.80a/p80x80/67867821_10218556902225002_3156177329013653504_n.jpg?_nc_cat=111&amp;_nc_oc=AQn_zY5vFLq_ml1M0bJfZi1T3z3m7dnDJRi3kvzv7fR1Y65KGDSRyYvJFBX22_lGzjc&amp;_nc_ht=scontent-mxp1-1.xx&amp;oh=c2e6943593c7c0993432e5dbe17bdb79&amp;oe=5DD174EE" data-src="https://scontent-mxp1-1.xx.fbcdn.net/v/t1.0-1/c0.0.80.80a/p80x80/67867821_10218556902225002_3156177329013653504_n.jpg?_nc_cat=111&amp;_nc_oc=AQn_zY5vFLq_ml1M0bJfZi1T3z3m7dnDJRi3kvzv7fR1Y65KGDSRyYvJFBX22_lGzjc&amp;_nc_ht=scontent-mxp1-1.xx&amp;oh=c2e6943593c7c0993432e5dbe17bdb79&amp;oe=5DD174EE" alt="" width="40" height="40" data-ft="{&quot;tn&quot;:&quot;-^&quot;}" itemprop="image"></div><span class="img _55ym _55yq _55yo _26ww" aria-busy="true" role="progressbar" aria-valuemin="0" aria-valuemax="100" aria-valuetext="Caricamento..."></span></div><svg class="_7lg0" height="42" width="42"><g class="_7lim"><circle class="_7lg1" cx="21" cy="21" fill="none" r="19" stroke="#4080ff" stroke-width="4"></circle></g></svg></span><span class="_7h4r"><div class="_mx9 wrap light verbose"><div class="_mxb" dir="auto"><span class="_nbt"><div id="u_ps_0_7_1"><div class="_4ik4 _4ik5" style="-webkit-line-clamp: 3;">Lucia Ladybug Cordella</div></div></span></div></div></span></div></div>"
outerText: "Lucia Ladybug Cordella"
ownerDocument: document
parentElement: div._7h4v
parentNode: div._7h4v
part: DOMTokenList [value: ""]
prefix: null
previousElementSibling: div._827c
previousSibling: div._827c
scrollHeight: 201
scrollLeft: 0
scrollTop: 0
scrollWidth: 113
shadowRoot: null
slot: ""
spellcheck: true
style: CSSStyleDeclaration {alignContent: "", alignItems: "", alignSelf: "", alignmentBaseline: "", all: "", …}
tabIndex: -1
tagName: "DIV"
textContent: "Lucia Ladybug Cordella"
title: ""
translate: true
__proto__: HTMLDivElement
length: 1
__proto__: Object(0)

UPDATE

I've reworked the code, now if I do a consol.log() I obtain this:

var el = $(document).find('#stories_tray');
      if( el.length > 0 ){
      }
      child = el.find('._827c');
        $.each(child, function(i){
          var div = $(child[i])
            .find('._7h4p')
            .attr('data-onkeypress');
          var l = JSON.parse(div);
          console.log(l[0].a);
        });

// console.log(l[0].a) output

[{…}]
0:
bucketID: "1294313527412940"
event: {__event: 1}
index: 0
item: {__elem: 1}
preloadImageURIs: (3) ["https://scontent-mxp1-1.xx.fbcdn.net/v/t15.5256-10…x&oh=6c2073b1f4136bdc8e51de5f5cfddbd3&oe=5DD415B0", "https://scontent-mxp1-1.xx.fbcdn.net/v/t1.0-9/fb50…x&oh=01bc9897de4eef2085c2540eb8e74cd3&oe=5E11C5E6", "https://scontent-mxp1-1.xx.fbcdn.net/v/t15.5256-10…x&oh=cc9309be18a2f3493227082141dfaf06&oe=5E0FAC9B"] // this is the array with info I need. It's logged on mouse over in this way [0].preloadImageURIs 
preloadVideoIDs: []
source: null
traySessionID: "09db6229-70c1-48c0-b39e-2625cff45f34"
__proto__: Object
length: 1
__proto__: Array(0)

But I can't access to the desired property, I get this error Uncaught TypeError: Cannot read property '0' of undefined if I try console.log(l[0].a[0].preloadImagesURIs) . The first div element is undefined because it's not have the child div I need, so I need also to skip it.

in your console log try console.log(div.preloadImageURIs) and see what comes up, or div[0].preloadImageURIs — Keith, Aug 28 '19 at 18:30
Ok I give it a try. Consider that the divs are generated dynamically, so does it will work? — jihuuNI, Aug 28 '19 at 18:34
Just add in the code in place of your console.log(div) , what does it spit out — Keith, Aug 28 '19 at 18:35
@Keith If I try as you suggested It will output `undefined`. — jihuuNI, Aug 28 '19 at 18:38
@Keith It will output the dom elements. I've updated the question with the log of the div object — jihuuNI, Aug 28 '19 at 18:39
Assuming you tried with both consoles, what does div[0] output — Keith, Aug 28 '19 at 18:40
@Keith It will log the divs that are found on the DOM. I can get the data property of the child div element but it need to be parsed as JSON — jihuuNI, Aug 28 '19 at 18:42
you can't have 2 0: in your console.log so you're adding in other data. if console.log(div) outputs all the information above that you posted, you should be able to identify information directly from div — Keith, Aug 28 '19 at 18:47
@Keith the `console.log(div)` is outoutting the parent div informations. the info I need are in the children divs of each div object. This is why I've used the `find()` function twice. from the second dom research I'm able to access to the child div data property, is there where the info I need is placed — jihuuNI, Aug 28 '19 at 18:54
Can you post an example HTML or better yet, have a working fiddle? — VVV, Aug 28 '19 at 18:59
OK help me out then, var el = $(document).find('#stories_tray'); should be the parent. $(el).find('._827'); should retrieve all the children of 'el'. if you do $(child).each(function(value, i ) { var childElement = $(this); correct? — Keith, Aug 28 '19 at 19:00
@Keith yes, el is the main parent div. the child is another div with another class, it's own a child div that have the data property I need. I've reworked the code and now I can access to the div[0].a object that is referencing to the div with the info I need. The problem is that I can't write div[0].a[0].preloadImageURIs[0] that is an array where 0 is the first link I need. — jihuuNI, Aug 28 '19 at 19:12
And when you write that, div[0].a[0].preloadImageURIs[0] doesn't produce anything or are you saying you literally can't write div[0].a[0].preloadImageURIs[0] — Keith, Aug 28 '19 at 19:20
no, It will not work. Uncaught TypeError: Cannot read property '0' of undefined or undefined already tried. — jihuuNI, Aug 28 '19 at 19:29
@Keith this is the error if I point to the main parent div: `jQuery.Deferred exception: Cannot read property '0' of undefined TypeError: Cannot read property '0' of undefined` I told you that it's not the div where the info are located, it's unuseful you point me on this way because will not work. — jihuuNI, Aug 28 '19 at 19:33
OK if l[0].a produces what you have above, and l[0].a[0].preloadImageURIs should give you all 3 arrays you are looking for. So then l[0].a[0].preloadImageURIs[0] will get you the first URL — Keith, Aug 28 '19 at 19:39
@Keith I've tested it, but it will produce a `Uncaught TypeError: Cannot read property '0' of undefined` error. And this is strange. — jihuuNI, Aug 28 '19 at 19:43
This is what I get, Uncaught TypeError: Cannot read property '0' of undefined` the `l[0].a[0].preloadImageURIs` and `l[0].a[0].preloadImageURIs` does not apparently exists for jquery also if they are logged in consolle in this way. — jihuuNI, Aug 28 '19 at 19:51
very strange because it shows a 0 value when you use l[0].a . So I take it l[0].a[0] produces the same error? If so, try l[0].a.preloadImageURIs and see if you return anything — Keith, Aug 28 '19 at 19:56
I've already tested these two way, they will produce the same `Uncaught TypeError: Cannot read property '0' of undefined`error. I think that there is something wrong with the code or some script is blocking my chrome extension code to access that property. It's facebook, and maybe they have something implemented on js side? — jihuuNI, Aug 28 '19 at 20:00

jihuuNI · Accepted Answer · 2019-08-28T20:26:29.123

Thanks for your helps devs! I've find out a solution by reworking my code. I've removed some unnecessary code and I've chained all the methods to parse the parent div who hold the child one that contains the informations I need. The usual syntax like l[0].a[0].preloadImageURIs[0] will not work and produce a strange error. I've searched on SO for a possible solution to iterate the nested array in the object and I found this interesting solution.I've adapted it for my code:

(function($){
  $(document).ready(function(){
    console.log('Extension Started!');
    var el = $(document).find('#stories_tray');
      child = el.find('._827c');
        $.each(child, function(i){
          var div = $(child[i])
            .find('._7h4p')
            .attr('data-onkeypress');
          var d = JSON.parse(div);
          const l = uri => d[0].a.find(e => e.uri).preloadImageURIs;
          console.log(l());  
        });

  });
}(jQuery));

Just for curiosity, anyone know how I can split in three separate link the returned values of the array?Now I got what I want but it print all the first one link of the three divs in once.

Get dynamic div data properly with jQuery

UPDATE

1 Answers1

Linked