How to access a specific json element with JavaScript

Question

I have a html-page with multiple json-elements and want to show content from one of them (jsonld of type book) into the page.

As long as there is only the needed json on the page, everything works fine. But i can't figure out how to adress the correct json once there is an additional json.

Do i need to make an additional loop with parsing the json an check for the type (but how to target the element then), or is there an easy and performant way (if-condition maybe?).

Any ideas, help and hints would be highly appreciated.

function codeAddress() {
var jsonld = JSON.parse(document.querySelector('script[type="application/ld+json"]').innerHTML);
document.getElementById('name').innerHTML = jsonld.name;
document.getElementById('buch-link').href =jsonld.sameAs;
document.getElementById('buch-link').title =jsonld.publisher.name + " - " + jsonld.author.name + " - " + jsonld.name;
document.getElementById('publisher').innerHTML = jsonld.publisher.name;	
document.getElementById('year').innerHTML = jsonld.copyrightYear;
document.getElementById('format').innerHTML = jsonld.bookFormat;
document.getElementById('pages').innerHTML = jsonld.numberOfPages;
document.getElementById('isbn').innerHTML = jsonld.isbn;
}
window.onload = codeAddress;
	
jQuery('#buchbeschreibung').parent('.panel-grid').prepend(jQuery('#leistungen:parent'));



	

	, 
	
	,  Seiten

	ISBN:

muka.gergely · Accepted Answer

Loop through the JSON objects, and get the one you need:

function codeAddress() {
  // I used document.querySelectorAll() to grab all the ld+json items on the page
  const jsons = document.querySelectorAll('script[type="application/ld+json"]')
  const jsonld = []

  // transform the grabbed items' content to array of JSON objects
  jsons.forEach(e => jsonld.push(JSON.parse(e.innerHTML)))

  // return the created array
  return jsonld
}

// calling the DOM modification function with the array of
// parsed JSON objects, and querying it for @type === 'Book'
// so only return the JSON object that has a type of Book
window.onload = setBookInformation(codeAddress().find(e => e['@type'] === 'Book'));

// a separate function to handle DOM modifications
function setBookInformation(json) {
  document.getElementById('name').innerHTML = json.name;
  document.getElementById('buch-link').href = json.sameAs;
  document.getElementById('buch-link').title = json.publisher.name + " - " + json.author.name + " - " + json.name;
  document.getElementById('publisher').innerHTML = json.publisher.name;
  document.getElementById('year').innerHTML = json.copyrightYear;
  document.getElementById('format').innerHTML = json.bookFormat;
  document.getElementById('pages').innerHTML = json.numberOfPages;
  document.getElementById('isbn').innerHTML = json.isbn;
}

// jQuery('#buchbeschreibung').parent('.panel-grid').prepend(jQuery('#leistungen:parent'));



  
    

    , 

    ,  Seiten
 ISBN:

With the snippet above you can parse any number of JSON objects in your HTML, and work with them like a JavaScript object - query them, filter them, assign its values to DOM elements, etc.

How to access a specific json element with JavaScript

Answers (2)

Related Questions