title: How do I add structured data using JSON-LD on dynamic pages that need to wait for content to load?
body: <p>I'm developing a website and I want to add structured data to detailed pages. 
  The problem is that I need to request the data before knowing what to add to the JSON-LD script.</p>
  
  <p>I am using Parse as a backend. I also tried to look around for tutorials on how to achieve that but it seems not possible to add JSON-LD dynamically.</p>
  
  <p>I really hope someone can help me with that! :)</p>
  
  <p><strong>EDIT:</strong></p>
  
  <p>The response with the data I need to put in the JSON-LD comes after the DOM is ready. What is it the pattern in this situations?</p>
  
  <p>I have a list of items and when clicking on one of them I have to open a detail page which I have to load first, but after content is loaded I want to provide structured data through JSON-LD.</p>
  
  <p>I'm at the beginning and I'm finding hard times solving this.</p>
  
  <p><strong>EDIT 2:</strong></p>
  
  <p>This is my actual implementation:</p>
  
  <p>In the HTML:</p>
  
  <pre><code>&lt;body&gt;
      // my html page code
      ...
      &lt;script type="text/javascript"&gt;
          loadDetailPageContent();
      &lt;/script&gt;
  &lt;/body&gt;
  </code></pre>
  
  <p>In the JS:</p>
  
  <pre><code>function loadDetailPageContent() {
      // Calling the method here is too early because I don't have info
      //writeData();
      createDetailPage();
  }
  
  function createDetailPage() {
      var recipe = Parse.Object.extend("Recipe");
      var query = new Parse.Query(recipe);
      query.equalTo("objectId", myId);
      query.first({
          success: function(result) {
              // Calling the method here would be perfect
              writeData();
          },
          error: function(error) {
              alert("Error: " + error.code + " " + error.message);
          }
      });
  }
  
  function writeData() {
      var script = document.createElement('script');
      script.type = 'application/ld+json';
      script.text = JSON.stringify({
          "@context": "http://schema.org",
          "@type": "Recipe",
          "name": "My recipe name"
      });
      document.querySelector('head').appendChild(el);
  }
  </code></pre>
  
  <p>As you can see the method writeData() is called in two places. If I call it immediately at the beginning, there is no problem and with the use of the Google Structured Data testing tool, I am able to track the structured data I need. The problem with that is that at that point I don't have the information to create the structured data because I need to wait for the response from Parse. </p>
  
  <p>When I am calling the method in the success callback, then the testing tool is not able to retrieve the data anymore :(</p>