Skip to main content

Javascript and JSON Together Forever

I created a static website recently for my sister. It is hosted on our ISP’s server, which means there is no way to do any server-side coding. The site is coding in html with a few pages using JavaScript and JSON (JavaScript object notation). Just what is JSON you ask? It is simply a way of structuring data like the more commonly known XML format, but it’s easier to use with JavaScript.

Why not just code the site in straight html? Well, I wanted the website to be somewhat easily modifiable. Even if the JSON is embedded in the page, it still allows easier access to the content and also cuts down on the actual number of pages.

For example, there is a page that displays a list of graphic designs she has made. The JSON text is processed when the page loads. When one of the graphic design links are clicked, a javascript function modifies the html on the page to display the new picture/title/description.

An example of JSON and the eval() function:

var pageInformation = '{"collection":[{"filename":"butterflyanimation.gif","title":"Butterfly GIF","description":"An animated butterfly made in ImageReady and Illustrator"},{"filename":"butterflypana.jpg","title":"Express Colors","description":"Express Inspiration for Spring 2005 Colors."}]}';

// create an object from the JSON formatted data

var objItems = eval('(' + pageInformation + ')');


Or consider this alternative method (as suggested by chatGPT when I had it fix my formatting for blogspot): 

var objItems = JSON.parse(pageInformation);


If this code were in a script tag, what would happen? The variable objItems would store all of that data in pageInformation as a javascript object. That means we can now access the data like: objItems.collection[0].title, which would be “Butterfly GIF”.

To change an element in a webpage, make sure it has its “id” property set. after that use the JavaScript:

document.getElementById('id_name').innerHTML = 'whatever';

Popular posts from this blog

ChatGPT is a new, and faster, way to do programming!

Currently ChatGPT is in a free “initial research preview” . One of its well known use cases at this point is generating software code. I’ve also just used it to write most of this article… Well, actually a future article about cleaning up SRT subtitle files of their metadata faster than I have been by hand with Notepad++ and its replace functionality. Update: I recorded a screencast of writing the SRT subtitle cleaner application loading and processing portion. I relied heavily on ChatGPT for code. It was a fun process! https://youtu.be/TkEW39OloUA ChatGPT, developed by OpenAI, is a powerful language model that can assist developers in a variety of tasks, including natural language processing and text generation. One such task that ChatGPT can help with is creating an SRT cleaner program. SRT, or SubRip Subtitle, files are commonly used to add subtitles to video files. However, these files can become cluttered with unnecessary information, such as timing lines or blank spaces. To clean...

Theme error in 2010s Android App after AppCompat Migration

I plan on releasing a lot of my old work as GPL open source, but most of it has aged to the point that it no longer functions, or if it does work it’s running in compatibility mode. Basically it’s no longer best practices. Not a good way to start off any new public GPL projects, in my opinion. The current project I’m working on is an Android app that calculates star trails meant to help photographers get or avoid that in their night time photos. For now I’m going to skip some of the import process because I didn’t document it exactly. It’s been mostly trial and error as I poke around Android Studio post import. The Android Studio import process… Removing Admob Google Play code before the project would run at all. After removing dependencies, it kind of worked, but when running it in the emulator it shows a pop-up message saying that the app was developed for an old version of Android. Going through the process of updating code to match current best practices… I had the IDE convert the ...

Printing to file in Linux WINE

I noticed that this post has been sitting as a draft since 2011. At this point I have no idea if it’s useful or what I was even doing, but I might as well make it public in case someone can find it helpful! So I’ve been trying to get one of those PDF print drivers working in WINE without success. I then came upon a process that might work. When printing you need to select the checkbox “Print to file” that creates a .prn file. Just Linux things... I was using a program that only has printing facilities, but I want to export around 100 pages of text and images. Once you have the .prn (postscript) file, you can do any number of things to it. In my case I want the postscript file to be converted to HTML. I am also considering PDF format because that has more conversion options to eventually get me to HTML or plain text. sudo apt-get install cups-pdf Or it looks like that package might have changed to this… sudo apt-get install printer-driver-cups-pdf Where PDFs would be generated in /home/...