Home injecting JSON record to HTML
Reply: 0

injecting JSON record to HTML

user3170 Published in March 21, 2018, 8:12 pm

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) {
  var query = document.getElementById('query').value.trim();
  var url = "http://www.vam.ac.uk/api/json/museumobject/search?images=1&q=" + encodeURIComponent(query);


  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);

      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 +

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

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

  <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>

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

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

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


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.

You need to login account before you can post.

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

© 2016 Powered by mzan.com design MATCHINFO