The HTML form to structured data pattern


This week I received a lot of submissions to airportpianos.org, the index of pianos in airports that I maintain. Submissions come through a Google Form. The form is intentionally brief , asking for two pieces of information: the airport name and the location of the piano.

When I receive a submission, I fill out a JSON entry and add it to the list of pianos. This list is then used to generate the static airportpianos.org web site. You can see the raw data used to generate the site on GitHub.

I regularly make small errors when adding new entries by hand. The most common one is adding a comma to the end of a JSON entry — which you can’t do! — or forgetting a comma after a value where one is needed.

This week I created a web form that generates the JSON record for me. The form is a static HTML page. When you submit the form, a JavaScript script reads the contents of the form fields and generates the JSON record that I can then paste into the list.

A section of the Add a Piano admin form showing several form fields, including the airport name, IATA code, and city where the airport is located

The form has a few addiitonal features. FIrst, if I type an IATA code — an “airport code” — that is already listed on the site, I get a warning to tell me the entry already exists. This will prevent me from making duplicate entries, and make sure I go to check the existing information to make sure it matches the most recent submission for the airport piano.

Second, I added two links:

  • Search for IATA
  • Search for lat long

The former takes the name of the airport and creates a Google Search link for {airport name} airport code. Google usually returns a big box showing the airport code, which makes data entry easier for me. The same is true of latitude and longitude, too.

A big results box on Google Search showing the airport code for Edinburgh Airport, EDI

Here is an example of a final record generated by the web form:

{
    "iata": "CPH",
    "title": "Copenhagen Kastrup International Airport",
    "city": "Copenhagen",
    "state": "Copenhagen",
    "country": "Denmark",
    "lat": "55.6120",
    "long": "12.6477",
    "zoom": "12",
    "hasPiano": "true",
    "pianoShortLocation": "Terminal 3",
    "lastConfirmed": "2025",
    "description": "There is a piano for public use located at Terminal 3.",
    "slug": "cph"
}

The record is valid JSON that I can add to the list of pianos.

This implementation follows the same principles behind my publish tool that I use to publish blog posts on my site: create a web form that, with JavaScript, generates data in the structure that a static site generator expects.



Source link

Visited 1 times, 1 visit(s) today

Related Article

These 2027 Oscars Predictions Are Brave (And Way Too Early)

The 2027 Oscars is about a year away, but that hasn’t stopped movie buffs from making way-too-early predictions on which movies and actors will win. We’re not even halfway through 2026 yet. That said, many films have already received early award season buzz, be it from showing off impressive trailers, getting nominations for the prestigious

Poilievre says Carney ‘pushing fear’ in address to Canadians on U.S. relations

OTTAWA — Conservative Leader Pierre Poilievre accused Prime Minister Mark Carney of “pushing fear” in a recent address to Canadians on the relationship with the U.S. In a 10-minute video posted to social media on Sunday, Carney said Canada’s deep economic ties with the U.S. used to be a major strength, but are now a

Operation Epic Fury just sent China’s Xi Jinping an unmistakable message

On Monday, China’s Xi Jinping let the mask slip. After weeks remaining largely absent from the diplomatic picture as the US conducted Operation Epic Fury against Iran, Xi called Saudi Arabia’s Mohammed bin Salman to publicly urge a peaceful reopening of the Strait of Hormuz. The pressure on Beijing is showing. At least five Iranian-linked

Best Photo Editing Apps for Android in 2026

Nowadays, Android phones have become much more than devices of connection, especially for photographers. Hobbyists and pros alike appreciate the convenience of editing spaces in their pockets. To match this demand, the best Android photo editor must handle far more than basic cropping or filters. It should recover detail, correct color, clean up distractions, and

ET logo

How did the Chinese proverb of the day influence China’s economic rise: Chinese proverb of the day: “When standing under someone else’s eaves, you must….” How this powerful ancient Chinese saying explains modern China’s rise— where success comes from…..

Chinese proverb of the day: China’s rise in the 21st century is not accidental—it is deeply rooted in philosophy, strategy, and historical thinking. The Chinese proverb of the day, “When standing under someone else’s eaves, you must bow your head,” captures this reality with striking clarity. Over the past four decades, China’s GDP has surged

Newcastle set £75m asking price for Anthony Gordon amid Bayern Munich interest – Paper Talk and football transfer gossip | Football News

The top stories and transfer rumours from Tuesday’s newspapers… TRANSFERS Newcastle United are prepared to open talks to sell Anthony Gordon to Bayern Munich if the German champions match their £75m valuation for the England forward. – The Times The chances of Manchester United signing Newcastle United‘s Sandro Tonali have receded due to the Magpies’

Vessel passing through the Strait of Hormuz in Oman

Seized Iranian cargo ship made multiple stops in China before interception

NEWYou can now listen to Fox News articles! An Iranian-flagged cargo ship recently seized by U.S. forces had recently traveled through Chinese ports, spotlighting a supply route now under scrutiny as officials probe suspected dual-use cargo aboard the vessel. The vessel, Touska, remains in U.S. custody as American forces continue inspecting what maritime security sources

Elon Musk Says ‘If AI/Robots Increase Output, Then You Must Issue Dollars To People or There Will Be Massive Disinflation’

Elon Musk has argued that federally funded checks delivering a universal high income are his preferred response to job losses tied to artificial intelligence, framing it as an inflation-safe policy if automation expands real output fast enough. The idea is drawing pushback from economist Sanjeev Sanyal, who in economist slams Musk’s universal high income plan

Real Madrid star wanted at Man United this summer

A member of the midfield ranks at La Liga giants Real Madrid has emerged as a leading transfer target at Manchester United. That’s according to The Telegraph, who highlight Aurélien Tchouaméni as the player in question. Advertisement France international Tchouaméni is for his part in the midst of what has been a largely impressive individual

Seagulls are pictured at the Baltic Sea beach in Timmendorfer Strand, Germany, on a sunny Sunday, April 12, 2026. (AP Photo/Michael Probst)

Erdogan Promises Tighter Gun Controls After Deadly Turkey School Attacks

ANKARA, April ⁠20 (Reuters) – ⁠Turkey will ⁠tighten gun-ownership rules and ​increase penalties for ‌owners whose children ‌find the ⁠firearms, ⁠President Tayyip Erdogan said on Monday ​after last week’s rare, deadly school ​shootings.  The second of the two ⁠separate ⁠attacks by ⁠students last ​week killed eight pupils and ​a ⁠teacher in a southeastern province of

Latest and Breaking News on NDTV

Iran Is Winning By Not Losing, Mehdi Hasan To NDTV On What US Faces

New Delhi: Many believed the war in the Middle East would be swift, but it has been over 40 days into the US-Israel military campaign against Iran and the war’s trajectory has confounded what Washington’s policymakers had predicted, Editor-in-Chief and CEO of Zeteo Mehdi Hasan told NDTV in an exclusive interview. Despite facing two nuclear-armed

甯漢豪訪問北京晤國資委   介紹港府加快北都發展工作

甯漢豪訪問北京晤國資委 介紹港府加快北都發展工作

發展局長甯漢豪今日(20日)在北京進行一系列交流及參訪活動,她上午拜訪國務院國有資產監督管理委員會(國資委),與國資委國際合作局副局長謝暉進行工作會議,向其介紹特區政府就加快發展北都及鼓勵企業參與等方面的工作。甯指特區政府為加快推動北都發展,已陸續推出多項措施落實多元開發模式,包括成立由政府擁有的產業園公司以推進產業進駐與發展,以及於去年年底為洪水橋新發展區內約11公頃「片區開發」試點展開招標。此外,特區政府爭取今年內就加快北都發展訂立專屬法例,以進一步為北都發展拆牆鬆綁及助力產業營運。甯漢豪感謝國資委支持及鼓勵中央企業參與北都發展,指國家《十五五規劃綱要》明確支持香港加快北都建設,香港定必抓緊機遇主動對接國家戰略要求,把中央支持轉化為推動香港高質量發展及改善民生的實際成果。其後,甯與中國建築集團有限公司(中建集團)副總經理陳勇及其團隊會面,雙方就如何把建造業打造為強大的新質生產力交換意見,並就推動兩地業界採用先進建築技術,特別是「組裝合成」建築法(MiC)的應用深化合作,以打造MiC成為大灣區走出國際的高端產業。她隨後與中建集團董事長鄭學選共進午餐,就企業如何從多方面參與北都發展及建造行業創新交流意見。她感謝中建集團一直積極參與香港建設,期待集團旗下企業繼續支持及參與北都發展,共同推動建造業持續發展及創新。局長亦考察由中建集團旗下企業負責的北京市西城區危舊樓改建項目 —— 三里河一區28號樓,了解到項目採用「原拆原建」模式,並引入MiC智能建造技術,顯著縮短工期,實現快速封頂與回遷。另外,甯漢豪下午出席香港工程師學會為慶祝成立50周年而舉辦的「香港工程傳奇展覽@首都」,今次展覽以「回首輝煌五十載,並肩打造新世代」為主題,展示香港工程界半世紀以來的卓越成就,並介紹未來創新科技與工程產業相融合的發展新趨勢。她在展覽啟動儀式致辭時表示,香港工程師學會在北京舉辦展覧,以行動表達工程專業致力融入國家發展大局、服務國家的熱情和承諾。《十五五規劃綱要》為建造業未來指明方向,要求鞏固提升行業在全球的地位和競爭力。香港工程業界多年來在大型基建項目上累積豐富經驗,擁有優秀人才、世界水平的專業標準和卓越的項目管理能力,屢獲國際獎項,為香港發展成為國際基建中心打好基礎。展望未來,她鼓勵工程專業更積極發揮「背靠祖國、聯通世界」的優勢,憑藉對國際建築標準的熟悉與豐富應用經驗,再結合內地的工程技術及供應鏈的蓬勃,優勢互補,一同打造「中國建造」的品牌,助力國家把先進的建築及水利基建技術、物料及產品推向世界,造福人類。 Source link

AC Milan, Juventus close in on Champions League qualification

MILAN: AC Milan and Juventus both took a big step towards qualification for next season’s Champions League with respective victories over Verona and Bologna on Sunday. Adrien Rabiot swept home the only goal in Milan’s 1-0 win at Verona, giving his team an eight-point cushion on Como and Roma in fifth and sixth, while Juve

0
Would love your thoughts, please comment.x
()
x