Day 28: Transform API Data with Map

Use one local JSON file with slightly “raw” data. Fetch local JSON, use .map() to create a cleaner display array, then render cards.

Requirements

  • Fetch local JSON
  • Store the original data
  • Use .map() to create a new array with display-friendly values
    • "modal-dialog" → "Modal Dialog"
    • "javascript" → "JavaScript"
    • 45 → "45 min"
  • Render the mapped array
  • Console log both original data and mapped data

JavaScript focus

  • fetch
  • .json()
  • .map()
  • returning objects
  • rendering transformed data

MDN prep

Transform API Data with Map

The HTML

							
								<div class="transformed_cards">
								    <!-- Render the articles/cards here
								    <article class="article">
								        <h3 class="tertiary_heading">1) modal dialog</h3>
								        <p>Category: JavaScript</p>
								        <p>Difficulty: beginner</p>
								        <p>Duration: 45 min</p>
								        <p class="featured">Featured</p>
								    </article> -->
								</div>

The JavaScript

							
								async function fetchSharedData() {
								    try {
								        const response = await fetch("../data/shared-map-sort.json");
								        if (!response.ok) {
								            throw new Error(`HTTP error! status: ${response.status}`);
								        }
								        const data = await response.json();
								        return data;
								    } catch (error) {
								        console.error("There was a problem: ", error);
								    }
								}

								function initTransformedData(data) {
								    console.log("Original: ", data);

								    const labels = {
								        javascript: "JavaScript",
								        css: "CSS",
								        html: "HTML",
								    };

								    const mapped = data.map((item) => {
								        return {
								            id: item.id,
								            title: item.title.replaceAll("-", " "),
								            category: labels[item.category] || item.category,
								            difficulty: item.difficulty,
								            time: `${item.duration} min`,
								            featured: item.is_featured,
								        };
								    });
								    return mapped;
								}

								function initRenderMapUI(data) {
								    console.log("Mapped: ", data);
								    const root = document.querySelector(".transformed_cards");
								    if (!root) return;

								    data.forEach((item) => {
								        const article = document.createElement("article");
								        article.classList.add("article");

								        const h3 = document.createElement("h3");
								        h3.classList.add("tertiary_heading");

								        const category = document.createElement("p");
								        const difficulty = document.createElement("p");
								        const duration = document.createElement("p");

								        const featured = document.createElement("p");
								        featured.classList.add("featured");

								        h3.textContent = `${item.id}) ${item.title}`;
								        category.textContent = `Category: ${item.category}`;
								        difficulty.textContent = `Difficulty: ${item.difficulty}`;
								        duration.textContent = `Duration: ${item.time}`;
								        featured.textContent = "Featured";

								        if (item.featured) {
								            article.append(h3, category, difficulty, duration, featured);
								        } else {
								            article.append(h3, category, difficulty, duration);
								        }
								        root.append(article);
								    });
								}

								async function init() {
								    const data = await fetchSharedData();
								    if (!data) return;

								    const transformed = initTransformedData(data);
								    initRenderMapUI(transformed);
								}
								init();