如何更新HTML脚本标签中嵌入的数据？

Question

I have a simple html page with Json-ld data embedded in the script tag.

How do I update this data on the submit of a form?

Here is some of the code of the page (data + load function). What I'm missing is the saveData function that updates the data embedded in the script section.

Thank you,

    <script id="person" type="application/ld+json">
{
  "@context": "http://schema.org",
  "@type": "Person",
  "givenName": "Marco",
  "familyName": "Van Basten"
}
</script>
<script>
function loadData() {

  var person = document.getElementById("person").textContent;
  var jsonld = JSON.parse(person);


  document.getElementById("givenName").value = jsonld.givenName;
  document.getElementById("familyName").value = jsonld.familyName;

}

Answer 1

The following code snippet is for example only , but should show you how to update your script object with the JSON string using JSON.stringify .

  person.innerHTML = JSON.stringify(jsonld);

Load the original by using Load. Change the values then Save and Load again. Use the browser developer tools to watch the values of the DOM.

 function loadData(e) { var person = document.getElementById("person"); var jsonld = JSON.parse(person.textContent); console.log(jsonld.givenName, jsonld); document.getElementById("givenName").value = jsonld.givenName; document.getElementById("familyName").value = jsonld.familyName; } function saveData(e) { console.log('event', e); var person = document.getElementById("person"); var jsonld = JSON.parse(person.textContent); jsonld.givenName =document.getElementById("givenName").value; jsonld.familyName =document.getElementById("familyName").value; //person.innerHTML = JSON.stringify(jsonld); person.textContent = JSON.stringify(jsonld); } document.getElementById("saveButton").addEventListener('click', saveData); document.getElementById("loadButton").addEventListener('click',loadData); 

 <script id="person" type="application/ld+json"> { "@context": "http://schema.org", "@type": "Person", "givenName": "Marco", "familyName": "Van Basten" } </script> <form> <input type="text" id="givenName" /> <input type="text" id="familyName" /> </form> <button id="loadButton">Load</button> <button id="saveButton">Save</button>