Home injecting JSON record to HTML
Reply: 1

injecting JSON record to HTML

Mattaeos
1#
Mattaeos Published in 2017-12-07 22:42:07Z

I'm trying to get the artist name, among other fields, to be visible within the HTML page. As you can see from the code posted, the image is already showing on the page, so we don't quite understand where the issue lies.

window.addEventListener("load", function() {
  document.getElementById('searchform').addEventListener('submit', search);
})

//load V&A museum objects
function search(evt) {
  evt.preventDefault();
  var query = document.getElementById('query').value.trim();
  var url = "http://www.vam.ac.uk/api/json/museumobject/search?images=1&q=" + encodeURIComponent(query);

  console.log(url);

  var xhr = new XMLHttpRequest();
  xhr.addEventListener("load", function() {
    if (xhr.readyState == 4 && xhr.status == 200) {
      var i, item, img_id, img_url, img, artist,
        target = document.getElementById("result"),
        json = JSON.parse(xhr.responseText);
      console.log(json);

      for (i = 0; i < json.records.length; i++) {
        item = json.records[i];
        console.log("artist = " + item.fields.artist);
        img_id = item.fields.primary_image_id;
        img_url = "http://media.vam.ac.uk/media/thira/collection_images/" +
          img_id.substr(0, 6) +
          "/" +
          img_id +
          "_jpg_o.jpg";

        img = document.createElement("img");
        img.setAttribute("src", img_url, );
        target.appendChild(img);

        artist = item.fields.artist;
        artist = document.createElement("h1");
        artist.setAttribute("h1", artist);
        artist = document.createElement("br");
        target.appendChild(artist);
      }
    }
  });
  xhr.open('GET', url, true); //true for asynchronous
  xhr.send();
}
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <link rel="stylesheet" href="va.css">
  <title>Victoria &amp; Albert Museum API TEST</title>
  <script src="va.js"></script>
</head>

<body>
  <!--<button id="button">Search</button>
    <br><br>
    <h1>Museum Objects</h1>
    <div id="objects"></div>-->

  <form id="searchform" class="form">
    <input type="text" id="query">
    <input type="submit" id="button">
  </form>

  <div id="result" class="objects">
    <!-- <div id="artists"><h1>Artists</h1></div> -->
  </div>
  
</body>

</html>

The result is an image being pulled from the VA API, followed by the artist name. The image is visible but the artist only gets printed to the console.

andrewf
2#
andrewf Reply to 2017-12-07 23:33:30Z

I think the issue is the setting of attribute, along with the overwriting of artist as suggested.

artistName = item.fields.artist;
artist = document.createElement("h1");
var newContent = document.createTextNode(artistName);
artist.appendChild(newContent);
target.appendChild(artist);
You need to login account before you can post.

About| Privacy statement| Terms of Service| Advertising| Contact us| Help| Sitemap|
Processed in 0.340019 second(s) , Gzip On .

© 2016 Powered by mzan.com design MATCHINFO