Reputation: 31
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'));
<div class="book-data">
<p>
<a id="buch-link" href="#" target="_blank" title="name"><strong id="name"></strong></a><br />
<span id="publisher"></span>, <span id="year"></span><br />
<span id="format"></span>, <span id="pages"></span> Seiten<br />
ISBN: <span id="isbn"></span><br />
</p>
</div>
<script type="application/ld+json">{
"@context": "http://schema.org",
"@type": "LocalBusiness",
"image": "https://www.freie-lektoren.de/wp-content/uploads/Nehmen-Sie-Platz-e1546854168810.jpg",
"priceRange": "$$",
"telephone": "+49-30-306442-60",
"additionalType": "http://www.productontology.org/doc/Lector",
"name": "Freie Lektoren Obst & Ohlerich",
"logo": "https://www.freie-lektoren.de/wp-content/uploads/FreieLektoren_Logo.svg",
"description": null,
"openingHours": "Mo-Fr 9:00-15:30",
"geo": {
"@type": "GeoCircle",
"geoMidpoint": {
"@type": "GeoCoordinates",
"latitude": null,
"longitude": null
},
"geoRadius": "750"
},
"url": "https://www.freie-lektoren.de",
"sameAs": [
"https://www.facebook.com/freielektoren/"
],
"contactPoint": {
"@type": "ContactPoint",
"telephone": "+49-30-306442-60",
"contactType": "customer service",
"email": "[email protected]",
"contactOption": "",
"areaServed": [
"AT",
"DE",
"CH"
],
"availableLanguage": [
"English",
"German"
]
},
"address": [
{
"@type": "PostalAddress",
"addressCountry": "Germany",
"addressLocality": "Gumtow",
"addressRegion": "Brandenburg",
"postalCode": "16866",
"streetAddress": "Br\u00fcsenhagen 28"
},
{
"@type": "PostalAddress",
"addressCountry": null,
"addressLocality": "Berlin",
"addressRegion": "Berlin",
"postalCode": "10179",
"streetAddress": "Engeldamm 66"
}
]
}</script>
<script type="application/ld+json">{
"@context": "http://schema.org",
"@type": "Book",
"name": "Der Tote vom Elbhang",
"author": {
"@type": "Person",
"name": "Anke K\u00fcpper"
},
"bookFormat": "Paperback",
"isbn": "978-3959672993",
"url": "https://www.freie-lektoren.de/?post_type=buecher&p=10186",
"sameAs": "https://www.harpercollins.de/products/der-tote-vom-elbhang-9783959678445",
"publisher": {
"@type": "Organization",
"name": "HarperCollings"
},
"numberOfPages": "336",
"copyrightYear": "2019",
"genre": "Krimi",
"inLanguage": "de-DE"
}</script>
Upvotes: 1
Views: 3724
Reputation: 1
just give them a name!
<script>
var json1 = {
"@context": "http://schema.org",
"@type": "LocalBusiness",
"image": "https://www.freie-lektoren.de/wp-content/uploads/Nehmen-Sie-Platz-e1546854168810.jpg",
"priceRange": "$$",
"telephone": "+49-30-306442-60",
"additionalType": "http://www.productontology.org/doc/Lector",
"name": "Freie Lektoren Obst & Ohlerich",
"logo": "https://www.freie-lektoren.de/wp-content/uploads/FreieLektoren_Logo.svg",
"description": null,
"openingHours": "Mo-Fr 9:00-15:30",
"geo": {
"@type": "GeoCircle",
"geoMidpoint": {
"@type": "GeoCoordinates",
"latitude": null,
"longitude": null
},
"geoRadius": "750"
},
"url": "https://www.freie-lektoren.de",
"sameAs": [
"https://www.facebook.com/freielektoren/"
],
"contactPoint": {
"@type": "ContactPoint",
"telephone": "+49-30-306442-60",
"contactType": "customer service",
"email": "[email protected]",
"contactOption": "",
"areaServed": [
"AT",
"DE",
"CH"
],
"availableLanguage": [
"English",
"German"
]
},
"address": [{
"@type": "PostalAddress",
"addressCountry": "Germany",
"addressLocality": "Gumtow",
"addressRegion": "Brandenburg",
"postalCode": "16866",
"streetAddress": "Br\u00fcsenhagen 28"
},
{
"@type": "PostalAddress",
"addressCountry": null,
"addressLocality": "Berlin",
"addressRegion": "Berlin",
"postalCode": "10179",
"streetAddress": "Engeldamm 66"
}
]
};
var json2 = {
"@context": "http://schema.org",
"@type": "Book",
"name": "Der Tote vom Elbhang",
"author": {
"@type": "Person",
"name": "Anke K\u00fcpper"
},
"bookFormat": "Paperback",
"isbn": "978-3959672993",
"url": "https://www.freie-lektoren.de/?post_type=buecher&p=10186",
"sameAs": "https://www.harpercollins.de/products/der-tote-vom-elbhang-9783959678445",
"publisher": {
"@type": "Organization",
"name": "HarperCollings"
},
"numberOfPages": "336",
"copyrightYear": "2019",
"genre": "Krimi",
"inLanguage": "de-DE"}
</script>
then parse them by their names :
function codeAddress() {
var jsonld1 = JSON.parse(json1);
//your functions
}
Upvotes: 0
Reputation: 8329
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'));
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="book-data">
<p>
<a id="buch-link" href="#" target="_blank" title="name"><strong id="name"></strong></a><br />
<span id="publisher"></span>, <span id="year"></span><br />
<span id="format"></span>, <span id="pages"></span> Seiten<br /> ISBN: <span id="isbn"></span><br />
</p>
</div>
<script type="application/ld+json">
{
"@context": "http://schema.org",
"@type": "LocalBusiness",
"image": "https://www.freie-lektoren.de/wp-content/uploads/Nehmen-Sie-Platz-e1546854168810.jpg",
"priceRange": "$$",
"telephone": "+49-30-306442-60",
"additionalType": "http://www.productontology.org/doc/Lector",
"name": "Freie Lektoren Obst & Ohlerich",
"logo": "https://www.freie-lektoren.de/wp-content/uploads/FreieLektoren_Logo.svg",
"description": null,
"openingHours": "Mo-Fr 9:00-15:30",
"geo": {
"@type": "GeoCircle",
"geoMidpoint": {
"@type": "GeoCoordinates",
"latitude": null,
"longitude": null
},
"geoRadius": "750"
},
"url": "https://www.freie-lektoren.de",
"sameAs": [
"https://www.facebook.com/freielektoren/"
],
"contactPoint": {
"@type": "ContactPoint",
"telephone": "+49-30-306442-60",
"contactType": "customer service",
"email": "[email protected]",
"contactOption": "",
"areaServed": [
"AT",
"DE",
"CH"
],
"availableLanguage": [
"English",
"German"
]
},
"address": [{
"@type": "PostalAddress",
"addressCountry": "Germany",
"addressLocality": "Gumtow",
"addressRegion": "Brandenburg",
"postalCode": "16866",
"streetAddress": "Br\u00fcsenhagen 28"
},
{
"@type": "PostalAddress",
"addressCountry": null,
"addressLocality": "Berlin",
"addressRegion": "Berlin",
"postalCode": "10179",
"streetAddress": "Engeldamm 66"
}
]
}
</script>
<script type="application/ld+json">
{
"@context": "http://schema.org",
"@type": "Book",
"name": "Der Tote vom Elbhang",
"author": {
"@type": "Person",
"name": "Anke K\u00fcpper"
},
"bookFormat": "Paperback",
"isbn": "978-3959672993",
"url": "https://www.freie-lektoren.de/?post_type=buecher&p=10186",
"sameAs": "https://www.harpercollins.de/products/der-tote-vom-elbhang-9783959678445",
"publisher": {
"@type": "Organization",
"name": "HarperCollings"
},
"numberOfPages": "336",
"copyrightYear": "2019",
"genre": "Krimi",
"inLanguage": "de-DE"
}
</script>
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.
Upvotes: 4