ravisiyer/jsonbin.html

## jsonbin.html
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <script src="https://cdn.jsdelivr.net/npm/renderjson@1.4.0/renderjson.min.js"></script>
    <script
      src="https://cdnjs.cloudflare.com/ajax/libs/axios/1.6.7/axios.min.js"
      integrity="sha512-NQfB/bDaB8kaSXF8E77JjhHG5PM6XVRxvHzkZiwl3ddWCEPBa23T76MuWSwAJdMGJnmQqM0VeY9kFszsrBEFrQ=="
      crossorigin="anonymous"
      referrerpolicy="no-referrer"
    ></script>
    <style>
      button {
        margin: 0.25rem;
      }
    </style>
  </head>
  <body>
    <h2>Test JSON bin (jsonbin.io) using Local Storage JSON items</h2>
    <!-- <p id="JSONbinurlId"></p> -->
    <p>
      <label for="itemNameId">Item name:</label>
      <input
        type="text"
        id="itemNameId"
        name="itemName"
        required
        value="posts"
      />
    </p>
    <div style="border: 1px solid">
      <span style="margin-left: 0.25rem">Actions:</span>
      <button onclick="handleShowLSClick()">Show LS item</button>
      <button onclick="handleCopyToBinClick()">LS => jsonbin.io</button>
      <button onclick="handleShowJSONBinClick()">Show jsonbin.io</button>
      <button onclick="handleCopyFromBinClick()">jsonbin.io => LS</button>
      <br />
      <span style="margin-left: 0.25rem"
        >Action status: <span id="statusId"></span
      ></span>
    </div>
    <button onclick="clearJSONDataDisplay()">Clear Data Display</button>
    <button onclick="showJSONBinURLs()">Show jsonbin.io URLs</button>
    <!-- <h3>Data Display:</h3> -->
    <div id="showDataId"></div>
    <script>
      const JSONBIN_GET_URL =
        "https://api.jsonbin.io/v3/b/65d45b93266cfc3fde8cb08e/latest?meta=false";
      // "https://api.jsonbin.io/v3/b/65d45b93266cfc3fde8cb08e?meta=false"
      const JSONBIN_PUT_URL =
        "https://api.jsonbin.io/v3/b/65d45b93266cfc3fde8cb08e?meta=false";

      const showDataId = document.getElementById("showDataId");
      const itemNameId = document.getElementById("itemNameId");
      const JSONbinurlId = document.getElementById("JSONbinurlId");
      const statusId = document.getElementById("statusId");
      //   JSONbinurlId.innerHTML = `JSON Bin (API) get and put urls:<br/>${JSONBIN_GET_URL}<br/>${JSONBIN_PUT_URL}`;

      function getItemAndShow(item) {
        const textJSON = localStorage.getItem(item);
        if (textJSON) {
          const items = JSON.parse(textJSON);
          showDataId.innerHTML = `<h3>Local Storage: ${item}</h3>`;
          showDataId.appendChild(renderjson.set_show_to_level("all")(items));
          //   showDataId.appendChild(renderjson(items));
          return textJSON;
        } else {
          showDataId.innerHTML = `Local Storage Item: '${item}' not found`;
          return null;
        }
      }

      function copyItemToJSONBin(item) {
        // const textJSON = getItemAndShow(item);
        const textJSON = localStorage.getItem(item);
        textJSON && writeToJSONBin(textJSON);
      }

      async function writeToJSONBin(textJSON) {
        try {
          const items = JSON.parse(textJSON);
          const res = await axios.put(JSONBIN_PUT_URL, items);
          statusId.innerHTML = "jsonbin.io (data) written";
        } catch (error) {
          statusId.innerHTML = error;
          //   alert(error);
        }
      }

      async function copyFromJSONBinToItem(item) {
        try {
          const res = await axios.get(JSONBIN_GET_URL);
          console.log(res.data);
          const msg = `Are you sure you want to copy jsonbin.io data into Local Storage Item: ${item}?`;
          if (!window.confirm(msg)) return;
          localStorage.setItem(item, JSON.stringify(res.data));
          statusId.innerHTML = "jsonbin.io (data) copied to LS item";
        } catch (error) {
          statusId.innerHTML = error;
          //   alert(error);
        }
      }

      // See comment note towards end of file about showJSONBin() and copyFromJSONBinToItem() using same
      // axios.get statement and some common try catch block statements
      async function showJSONBin() {
        try {
          const res = await axios.get(JSONBIN_GET_URL);
          console.log(res.data);
          showDataId.innerHTML = "<h3>jsonbin.io</h3>";
          showDataId.appendChild(renderjson.set_show_to_level("all")(res.data));
          statusId.innerHTML = "jsonbin.io (data) shown";
          // showDataId.appendChild(renderjson(res.data));
        } catch (error) {
          statusId.innerHTML = error;
          //   alert(error);
        }
      }

      function clearJSONDataDisplay() {
        showDataId.innerHTML = "";
        statusId.innerHTML = "";
      }
      function showJSONBinURLs() {
        showDataId.innerHTML = `jsonbin.io (API) URLs <br/>get: ${JSONBIN_GET_URL}<br/>put: ${JSONBIN_PUT_URL}`;
      }
      const handleShowJSONBinClick = () => {
        statusId.innerHTML =
          "Initiating request to jsonbin.io and waiting for response ...";
        showJSONBin();
      };

      const handleShowLSClick = () => {
        getItemAndShow(itemNameId.value);
        statusId.innerHTML = "LS item shown";
      };

      const handleCopyToBinClick = () => {
        statusId.innerHTML =
          "Initiating request to jsonbin.io and waiting for response ...";
        copyItemToJSONBin(itemNameId.value);
      };
      const handleCopyFromBinClick = () => {
        statusId.innerHTML =
          "Initiating request to jsonbin.io and waiting for response ...";
        copyFromJSONBinToItem(itemNameId.value);
      };
      // showJSONBin() uses same axios.get as copyFromJSONBinToItem(). But I could not figure out a simple
      // way to encapsulate the common axios.get in a function which is called by both these functions.
      // The issue is that the await axios.get statement will cause the function execution to suspend and the
      // function will return a (pending) promise. But both showJSONBin() and copyFromJSONBinToItem() have
      // code to be executed (only) after axios.get returns (promise is fulfilled) and these codes/logic are
      // different.
      // There must be some standard way such cases are handled without repeating the same await axios.get
      // statement like I have done (once in each of the two functions) with associated try catch block with
      // some common statements.
      // Perhaps firing a custom event after axios.get completes is one way with the event to be fired
      // passed as a parameter, and these two functions have two different event handlers (associated with
      // two different custom events).
      // Another way could be specifying a callback function as a parameter in the common function with
      // await axios.get which is executed after axios.get completes. These two functions could pass
      // different callback functions as parameter to the common function having await axios.get.
      // But I felt that for this test program, I should not make it complex using one of the above two
      // suggestions. ... Perhaps once I come to know of a standard code pattern to handle such situations
      // I will modify this test program to use that. Till that time I will go in for simply repeating
      // the same await axios.get statement some common try catch block statements in these two functions.
      // Of course, the same URL can be shared via a const, which is what I have done.
    </script>
  </body>
</html>
	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="UTF-8" />
	<meta name="viewport" content="width=device-width, initial-scale=1.0" />
	<title>Document</title>
	<script src="https://cdn.jsdelivr.net/npm/renderjson@1.4.0/renderjson.min.js"></script>
	<script
	src="https://cdnjs.cloudflare.com/ajax/libs/axios/1.6.7/axios.min.js"
	integrity="sha512-NQfB/bDaB8kaSXF8E77JjhHG5PM6XVRxvHzkZiwl3ddWCEPBa23T76MuWSwAJdMGJnmQqM0VeY9kFszsrBEFrQ=="
	crossorigin="anonymous"
	referrerpolicy="no-referrer"
	></script>
	<style>
	button {
	margin: 0.25rem;
	}
	</style>
	</head>
	<body>
	<h2>Test JSON bin (jsonbin.io) using Local Storage JSON items</h2>
	<!-- <p id="JSONbinurlId"></p> -->
	<p>
	<label for="itemNameId">Item name:</label>
	<input
	type="text"
	id="itemNameId"
	name="itemName"
	required
	value="posts"
	/>
	</p>
	<div style="border: 1px solid">
	<span style="margin-left: 0.25rem">Actions:</span>
	<button onclick="handleShowLSClick()">Show LS item</button>
	<button onclick="handleCopyToBinClick()">LS => jsonbin.io</button>
	<button onclick="handleShowJSONBinClick()">Show jsonbin.io</button>
	<button onclick="handleCopyFromBinClick()">jsonbin.io => LS</button>
	<br />
	<span style="margin-left: 0.25rem"
	>Action status: <span id="statusId"></span
	></span>
	</div>
	<button onclick="clearJSONDataDisplay()">Clear Data Display</button>
	<button onclick="showJSONBinURLs()">Show jsonbin.io URLs</button>
	<!-- <h3>Data Display:</h3> -->
	<div id="showDataId"></div>
	<script>
	const JSONBIN_GET_URL =
	"https://api.jsonbin.io/v3/b/65d45b93266cfc3fde8cb08e/latest?meta=false";
	// "https://api.jsonbin.io/v3/b/65d45b93266cfc3fde8cb08e?meta=false"
	const JSONBIN_PUT_URL =
	"https://api.jsonbin.io/v3/b/65d45b93266cfc3fde8cb08e?meta=false";

	const showDataId = document.getElementById("showDataId");
	const itemNameId = document.getElementById("itemNameId");
	const JSONbinurlId = document.getElementById("JSONbinurlId");
	const statusId = document.getElementById("statusId");
	// JSONbinurlId.innerHTML = `JSON Bin (API) get and put urls:<br/>${JSONBIN_GET_URL}<br/>${JSONBIN_PUT_URL}`;

	function getItemAndShow(item) {
	const textJSON = localStorage.getItem(item);
	if (textJSON) {
	const items = JSON.parse(textJSON);
	showDataId.innerHTML = `<h3>Local Storage: ${item}</h3>`;
	showDataId.appendChild(renderjson.set_show_to_level("all")(items));
	// showDataId.appendChild(renderjson(items));
	return textJSON;
	} else {
	showDataId.innerHTML = `Local Storage Item: '${item}' not found`;
	return null;
	}
	}

	function copyItemToJSONBin(item) {
	// const textJSON = getItemAndShow(item);
	const textJSON = localStorage.getItem(item);
	textJSON && writeToJSONBin(textJSON);
	}

	async function writeToJSONBin(textJSON) {
	try {
	const items = JSON.parse(textJSON);
	const res = await axios.put(JSONBIN_PUT_URL, items);
	statusId.innerHTML = "jsonbin.io (data) written";
	} catch (error) {
	statusId.innerHTML = error;
	// alert(error);
	}
	}

	async function copyFromJSONBinToItem(item) {
	try {
	const res = await axios.get(JSONBIN_GET_URL);
	console.log(res.data);
	const msg = `Are you sure you want to copy jsonbin.io data into Local Storage Item: ${item}?`;
	if (!window.confirm(msg)) return;
	localStorage.setItem(item, JSON.stringify(res.data));
	statusId.innerHTML = "jsonbin.io (data) copied to LS item";
	} catch (error) {
	statusId.innerHTML = error;
	// alert(error);
	}
	}

	// See comment note towards end of file about showJSONBin() and copyFromJSONBinToItem() using same
	// axios.get statement and some common try catch block statements
	async function showJSONBin() {
	try {
	const res = await axios.get(JSONBIN_GET_URL);
	console.log(res.data);
	showDataId.innerHTML = "<h3>jsonbin.io</h3>";
	showDataId.appendChild(renderjson.set_show_to_level("all")(res.data));
	statusId.innerHTML = "jsonbin.io (data) shown";
	// showDataId.appendChild(renderjson(res.data));
	} catch (error) {
	statusId.innerHTML = error;
	// alert(error);
	}
	}

	function clearJSONDataDisplay() {
	showDataId.innerHTML = "";
	statusId.innerHTML = "";
	}
	function showJSONBinURLs() {
	showDataId.innerHTML = `jsonbin.io (API) URLs <br/>get: ${JSONBIN_GET_URL}<br/>put: ${JSONBIN_PUT_URL}`;
	}
	const handleShowJSONBinClick = () => {
	statusId.innerHTML =
	"Initiating request to jsonbin.io and waiting for response ...";
	showJSONBin();
	};

	const handleShowLSClick = () => {
	getItemAndShow(itemNameId.value);
	statusId.innerHTML = "LS item shown";
	};

	const handleCopyToBinClick = () => {
	statusId.innerHTML =
	"Initiating request to jsonbin.io and waiting for response ...";
	copyItemToJSONBin(itemNameId.value);
	};
	const handleCopyFromBinClick = () => {
	statusId.innerHTML =
	"Initiating request to jsonbin.io and waiting for response ...";
	copyFromJSONBinToItem(itemNameId.value);
	};
	// showJSONBin() uses same axios.get as copyFromJSONBinToItem(). But I could not figure out a simple
	// way to encapsulate the common axios.get in a function which is called by both these functions.
	// The issue is that the await axios.get statement will cause the function execution to suspend and the
	// function will return a (pending) promise. But both showJSONBin() and copyFromJSONBinToItem() have
	// code to be executed (only) after axios.get returns (promise is fulfilled) and these codes/logic are
	// different.
	// There must be some standard way such cases are handled without repeating the same await axios.get
	// statement like I have done (once in each of the two functions) with associated try catch block with
	// some common statements.
	// Perhaps firing a custom event after axios.get completes is one way with the event to be fired
	// passed as a parameter, and these two functions have two different event handlers (associated with
	// two different custom events).
	// Another way could be specifying a callback function as a parameter in the common function with
	// await axios.get which is executed after axios.get completes. These two functions could pass
	// different callback functions as parameter to the common function having await axios.get.
	// But I felt that for this test program, I should not make it complex using one of the above two
	// suggestions. ... Perhaps once I come to know of a standard code pattern to handle such situations
	// I will modify this test program to use that. Till that time I will go in for simply repeating
	// the same await axios.get statement some common try catch block statements in these two functions.
	// Of course, the same URL can be shared via a const, which is what I have done.
	</script>
	</body>
	</html>