Logo

dev-resources.site

for different kinds of informations.

Import JSON Data in Astro (with Typescript)

Published at
1/12/2025
Categories
webdev
astro
json
typescript
Author
flnzba
Categories
4 categories in total
webdev
open
astro
open
json
open
typescript
open
Author
6 person written this
flnzba
open
Import JSON Data in Astro (with Typescript)

Refactoring Code for Enhanced Maintainability: From In-file Data Objects to JSON

The Original Approach: In-file Data Object

Initially, the technology stack data for the front page of fzeba.com was embedded directly within the React component using a constant array cactusTech. This array held multiple technology entries, each described by properties like desc, href, and title. The array was directly used in the component to render the technology stack section.

While this approach worked, a better solution (for me) was to separate the data from the component code. Then load the data from a JSON file, which would make the code more maintainable and scalable.

Here's a snippet of the original (React) component using the in-file data object:

<section class="mt-16">
  <h2 class="title mb-4 text-xl">Technology Stack</h2>
  <dl class="space-y-4">
    {cactusTech.map(({ desc, href, title }) => (
    <div class="flex flex-col gap-2 sm:flex-row">
      <dt>
        <span class="flex">
          <a class="cactus-link" href="{href}" rel="noreferrer" target="_blank">
            {title} </a
          >:
        </span>
      </dt>
      <dd>{desc}</dd>
    </div>
    ))}
  </dl>
</section>
Enter fullscreen mode Exit fullscreen mode

The Improved Approach: JSON Data File

To address these issues, I refactored the code to load the technology stack data from a separate JSON file. This change provided several benefits:

  • Improved Maintainability: Separating the data from the component code makes the system easier to maintain and modify.
  • Enhanced Scalability: With data in a separate file, adding or updating technology stack entries is simpler and does not require modifications to the component code.
  • Better Organization: The separation adheres to modern development practices, keeping the codebase cleaner and more organized.

The refactored code now loads the technology data from a JSON file, as shown below:

<!-- Loads TechStack data via json file -->
<section class="mt-16">
  <h2 class="title mb-4 text-xl">Tech Stack</h2>
  <dl class="space-y-4">
    {techStack.map(techPoint => (
    <div class="flex flex-col gap-2 sm:flex-row">
      <span class="flex">
        <a
          class="cactus-link"
          href="{techPoint.href}"
          rel="noreferrer"
          target="_blank"
        >
          {techPoint.title} </a
        >:
      </span>
      <h2>{techPoint.title}</h2>
      <p>{techPoint.desc}</p>
    </div>
    ))}
  </dl>
</section>
Enter fullscreen mode Exit fullscreen mode

The data file techStack.json looks like this:

[
  {
    "desc": "OOP and so on...",
    "href": "#",
    "title": "Java"
  },
  {
    "desc": "Website stuff and so on...",
    "href": "#",
    "title": "Javascript"
  }
  // Other technologies and so on...
]
Enter fullscreen mode Exit fullscreen mode

Outcome and Benefits

The migration to a JSON-based data handling approach has made the codebase more flexible and maintainable. It simplifies updates and ensures that the application can scale more effectively as new technologies are added to the stack. This refactor not only improves the current state of the project but also aligns it with best practices for future development and maintenance.

Conclusion

Refactoring might require some upfront effort but is often worth it for the benefits it brings in terms of maintainability and scalability. By separating concerns and extracting the data layer from the presentation layer, applications can grow more seamlessly and remain manageable even as they evolve (totally not written by a AI - trust me).

Read this article and more on fzeba.com.

json Article's
30 articles in total
Favicon
How to Fetch URL Content, Set It into a Dictionary, and Extract Specific Keys in iOS Shortcuts
Favicon
Dynamic Routes in Astro (+load parameters from JSON)
Favicon
Effortlessly Host Static JSON Files with JSONsilo.com
Favicon
How to Implement Authentication in React Using JWT (JSON Web Tokens)
Favicon
Converting documents for LLM processing β€” A modern approach
Favicon
Import JSON Data in Astro (with Typescript)
Favicon
Devise not accepting JSON Token
Favicon
Integration for FormatJS/react-intl: Automated Translations with doloc
Favicon
β€œDefu” usage in unbuild source code.
Favicon
Converting documents for LLM processing β€” A modern approach
Favicon
How to crawl and parse JSON data with Python crawler
Favicon
JSON Visual Edit
Favicon
Develop a ulauncher extension with a command database
Favicon
Building a Smart Feedback Agent with Copilot Studio, Adaptive cards and Power Automate
Favicon
Simplifying JSON Validation with Ajv (Another JSON Validator)
Favicon
A Straightforward Guide to Building and Using aΒ JSON Database File
Favicon
AI prompt sample - a full chat content that demonstrates how to get a professional looking website in a few munities
Favicon
Fixing and Validating JSON with Ease: An In-Depth Guide
Favicon
Useful too to work with your JSON files - jq
Favicon
what is jq? a program for json files
Favicon
Code. Gleam. Extract fields from JSON
Favicon
Build an Application Without SQL Server Database (Avoiding RPrometheusedis, MongoDB, and )
Favicon
FAQ β€” Bloomer Mock Data Generator
Favicon
My React Journey: Day 18
Favicon
Working with JSON in MySQL
Favicon
JSON for Biggners
Favicon
angular and json
Favicon
iter.json: A Powerful and Efficient Way to Iterate and Manipulate JSON in Go
Favicon
This unknown Currency API is served over 50 Billion times a month !
Favicon
Common Data Formats in JavaScript: A Comprehensive Guide With Examples

Featured ones: