A Hands-On Introduction to Modern JavaScript for SEOs via @hamletbatista

var json_str = `{ "@context": "http://schema.org/", "@type": "Recipe", "review": { "@type": "Review", "reviewRating": { "@type": "Rating", "ratingValue": "4", "bestRating": "5" },// Plus other elements }`;

The important technique here is that I saved the whole hard-coded JSON-LD code in a JavaScript string variable. I used backticks to handle multiple lines of text.

function update_ratingCount(ratingCount){  var jsonld = JSON.parse(json_str);jsonld.aggregateRating.ratingCount = ratingCount; return JSON.stringify(jsonld);}

I used JSON.parse to convert the string to an object that makes it easy to reference any element in the JSON-LD structure.

See how I can navigate nested levels using dots in jsonld.aggregateRating.ratingCount. Then, after I update the ratingCount value, I need to convert the object back to a string for insertion into the page.

 if (this.state.submitted) {  //get current reviews var review_count = document.querySelector("body > div > div:nth-child(4) > div.col-lg-12 > h2").textContent; review_count = review_count.split(" ")[0] //increase current rating count by one var count = parseInt(review_count); count++; review_count = count.toString(); //now that we have the new number of reviews. We can update the page and the JSONLD  document.getElementById("user_reviews").innerHTML = `${review_count} user reviews`; document.getElementById("jsonld").innerHTML = update_ratingCount(review_count); if(this.name == ""){ return `You submitted ${this.state.review}`; }else{ return `${this.state.name}, you submitted ${this.state.review}`; } }

I tested this in Chrome and I can see the values updated under the developer tool’s element tab. It won’t work with the Structured Data Testing Tool because the changes are not permanent.

And there you have it. If you try these code snippets and the codelab yourself, you should have learned enough JavaScript to be dangerous!

Community Projects & Resources to Learn More

The best way to learn programming and JavaScript, in particular, is by practicing it. The more you do it, the better you get at it.

Don’t get discouraged by the initial obstacles, come back to them later with fresh ideas.

Here are some tutorials to get you warmed up.

1. JavaScript Tutorial from W3C Schools
2. The Modern JavaScript Tutorial
3. CSS Selectors reference from W3C
4. Getting Started with JavaScript Debugging

This year started with so much excitement around Python, coding, and automation in the SEO community.

So many cool projects, articles, videos and introduction guides.

I’m so glad that everybody is building off the work of each other and making the community stronger and more fun every day.