0

I'm trying to fill divs with different PDF's embedded on iframe tags, the src of the pdfs are taken from this json file:

{  


"0" : {
      "ID": "Doc1", 
      "URL":"http://192.168.13.158/31818_E-(1).PDF"
   },

   "1" : {
      "ID": "Doc1", 
      "URL":"http://192.168.13.158/31818_P-(1).pdf"
   },

   "2" : {
      "ID": "Doc1", 
      "URL":"http://192.168.13.158/31818_P-(2)%20(1).pdf"
   },

   "3" : {
      "ID": "Doc1", 
      "URL":"http://192.168.13.158/31818_T-(1).pdf"
   },

This is the whole jquery code:

    <script>
  $( document ).ready(function() {
    var json = (function() {
      json = null;
      $.ajax({
        'async': false,
        'global': false,
        'url': "planos.json",
        'dataType': "json",
        'success': function (data) {
          json = data;
        }
      });
      return json;
    })();
    /*Add Read Document Marker + PDF Reader*/
      $(".panel-title .document-link").click(function(e) { 
        for (var i = 0; i < Object.keys(json).length; i++){
          var dataOrderSelected=$(this).attr('data-order');
          if ( (dataOrderSelected == i) && ($("iframe[data-order='"+dataOrderSelected+"']").attr("src",""))) 
          {
            $("iframe[data-order='"+dataOrderSelected+"']").attr('src', json[i].URL);
          } 
        };  
      });
    /*Add Read Document Marker + PDF Reader*/  
  });      
</script>

I'm getting this error:

*Uncaught TypeError: Cannot convert undefined or null to object
at Function.keys (<anonymous>)
at HTMLAnchorElement.<anonymous> (audits-paso-2-tabs.html:423)
at HTMLAnchorElement.dispatch (jquery.min.js:5)
at HTMLAnchorElement.v.handle (jquery.min.js:5)*

So what i'm guessing is that that part of my jquery can't access the json variable (Object.keys(json).length). Any help would be really appreciate, im a newbie regarding how to deal with json files on this context. Many Thanks in advance.

Lowtrux
  • 156
  • 2
  • 12
  • 41
  • `return json` runs immediately before ajax completes. Thats the problem. – Hemal Feb 17 '17 at 13:09
  • Thanks @Hernal, can you let me know a possible solution ? or explain a little bit your comment, sorry a total newbie here. – Lowtrux Feb 17 '17 at 13:11
  • You can declare `var json;` globally. When ajax completes, `success` function will fill `json`. Then if you click, you will find `json` non-empty. – Hemal Feb 17 '17 at 13:14
  • Hi the keys are string and what you are trying to retrieve in integer just use string keys to get your data. json[i.toString()].URL – Subhrajyoti Das Feb 17 '17 at 13:15
  • @Hernal i really think that's my problem but i have been trying to declare var json as a global variable and still won't work, im pasting the whole jquery code in my original question. – Lowtrux Feb 17 '17 at 13:20
  • @SubhrajyotiDas i really don't think that's my problem (i tried tho) and won't work – Lowtrux Feb 17 '17 at 13:23
  • you can't return async response. try making async:true // this is not recommended though, instead make your ajax call and fill your div into success response. – Abhinav Feb 17 '17 at 13:28
  • Hi @user7417866 can you give me an example, i'm still not able to make it work, when i try to fill my div into the success response nothing happens. Thanks ! – Lowtrux Feb 20 '17 at 11:38
  • its marked as duplicate, I can't post answer here. share your code whatever you have done into success response onto another question and link this post to that may be I can help you there... – Abhinav Feb 20 '17 at 13:21

0 Answers0