feat: Adjust JSON stringification for improved readability in respons…

…e display components
SivaramPg · Dec 16, 2024 · 25023bc · 25023bc
1 parent ab8ee3a
commit 25023bc
Show file tree

Hide file tree

Showing 4 changed files with 6 additions and 6 deletions.
diff --git a/src/app/[category]/[slug]/page.tsx b/src/app/[category]/[slug]/page.tsx
@@ -116,7 +116,7 @@ export default async function Page({
 			<ApiEndpointElement text={data.url} />
 			<RequestDisplayElement slug={`/${category}/${slug}`} />
 			<ResponseDisplayElement>
-				{JSON.stringify(data, null, 8)}
+				{JSON.stringify(data, null, 2)}
 			</ResponseDisplayElement>
 		</main>
 	)

diff --git a/src/app/[category]/page.tsx b/src/app/[category]/page.tsx
@@ -82,7 +82,7 @@ export default async function Page({
 			<ApiEndpointElement text={`https://swapi.info/api/${category}`} />
 			<RequestDisplayElement slug={`/${category}`} />
 			<ResponseDisplayElement>
-				{JSON.stringify(data, null, 8)}
+				{JSON.stringify(data, null, 2)}
 			</ResponseDisplayElement>
 			<div className={cn("w-full max-w-screen-lg flex flex-col gap-2")}>
 				<h4 className="text-lg font-bold md:text-xl lg:text-2xl opacity-70">

diff --git a/src/app/page.tsx b/src/app/page.tsx
@@ -28,7 +28,7 @@ export default async function Home() {
 				<div className="container flex flex-col items-center justify-center gap-8 px-4 mx-auto">
 					<RequestDisplayElement slug={"/"} />
 					<ResponseDisplayElement>
-						{JSON.stringify(data, null, 8)}
+						{JSON.stringify(data, null, 4)}
 					</ResponseDisplayElement>
 					<div className={clsx("w-full max-w-screen-lg flex flex-col gap-2")}>
 						<h4 className="text-lg font-bold md:text-xl lg:text-2xl opacity-70">

diff --git a/src/components/RequestDisplayElement.tsx b/src/components/RequestDisplayElement.tsx
@@ -37,7 +37,7 @@ export default RequestDisplayElement
 
 function getRequest(slug: string) {
 	return `fetch("https://swapi.info/api${slug}")
-        .then((res) => res.json()) // Parse the JSON content from the API to be consumed
-        .then((json) => console.log(json)) // Log the JSON response to your console
-        .catch((error) => console.error(error)) // Log the API error (if any) to your console`
+    .then((res) => res.json()) // Parse the JSON content from the API to be consumed
+    .then((json) => console.log(json)) // Log the JSON response to your console
+    .catch((error) => console.error(error)) // Log the API error (if any) to your console`
 }