Specific data isn't rendered when want to display it
Answered
Bigheaded ant posted this in #help-forum
Bigheaded antOP
Hello everyone, can anyone help me out how do I fix it so that the specific data displayed can appear on the page, because if I print the complete data, for example a user, the results appear, but when one of the data wants to display, the result is blank.
export default async function RootLayout({
children,
}: Readonly<{
children: React.ReactNode;
}>) {
// Fetch user data and token on the server-side
const userCookie = await getCookies("__u__");
const user = isJSON(userCookie.value) ? JSON.parse(userCookie.value) : userCookie.value;
// const tokenCookie = await getCookies("__tk__");
// const token = tokenCookie.value;
return (
<html lang="en">
<body className={`${inter.className} antialiased`}>
{user} // all data from user
{user.email} // spesific data
{/* <AccessPermitted user={user} token={null} /> */}
<Header user={user}/>
{children}
<Footer/>
<Toaster />
</body>
</html>
);
}
64 Replies
Bigheaded antOP
Upp please
Bigheaded antOP
Uppp
Is there no anyone can help me with this?
Bigheaded antOP
Uppp
If I understand correctly, you only want to display a single piece of data. You can do this by accessing the desired field in the JSON data, like this:
user.DATA
— this will display only the specific data you want.@HEDI If I understand correctly, you only want to display a single piece of data. You can do this by accessing the desired field in the JSON data, like this:
user.DATA — this will display only the specific data you want.
Bigheaded antOP
Yeah, I've already did it sir. As you can in this code.
export default async function RootLayout({
children,
}: Readonly<{
children: React.ReactNode;
}>) {
// Fetch user data and token on the server-side
const userCookie = await getCookies("__u__");
const user = isJSON(userCookie.value) ? JSON.parse(userCookie.value) : userCookie.value;
// const tokenCookie = await getCookies("__tk__");
// const token = tokenCookie.value;
return (
<html lang="en">
<body className={`${inter.className} antialiased`}>
{user} // all data from user
{user.email} // spesific data
{/* <AccessPermitted user={user} token={null} /> */}
<Header user={user}/>
{children}
<Footer/>
<Toaster />
</body>
</html>
);
}
I have print {user} and {user.email} but for the single data isn't rendered.
You check if the JSON-parse runs.
Bigheaded antOP
@HEDI You check if the JSON-parse runs.
Bigheaded antOP
I think it's already run, because when I console.log from the server, it's already parsed.
You need to parse it
@Giant Angora Its json
Bigheaded antOP
U mean I need double parse sir?
Giant Angora
Maybe your parser does not run
@Giant Angora Maybe your parser does not run
Bigheaded antOP
U mean something like this sir?
It's working but should I need to parse again everytime I want to call specific data.
Giant Angora
what is code of isjon ?
@Giant Angora what is code of isjon ?
nice question
Bigheaded antOP
This is the code isJson.
Giant Angora
y you need isJSON?
const jsonString = '{"name": "John Doe", "email": "john.doe@example.com", "age": 30}';
const user = JSON.parse(jsonString);
console.log(user.name);
@Bigheaded ant This is the code isJson.
Bigheaded antOP
Yeah to check whether the data is json or not. if it's then I want to parse it.
Giant Angora
dont you sure either your data is json or normal text?
@Bigheaded ant Yeah to check whether the data is json or not. if it's then I want to parse it.
If it's not in the same format as the JSON string, then the first one will run. Check if the cookie's format is correct for your JSON.
@Giant Angora dont you sure either your data is json or normal text?
Bigheaded antOP
I set the data user in cookie after user succeed login. It set in the server.
Giant Angora
run this in your browser console, you will se diff. btw. how JSON and normal object gets log
const json = JSON.stringify({
a:"a",
b:"b"
})
console.log(json)
console.log(JSON.parse(json))
Bigheaded antOP
Sorry wrong code.
Please show me what the userCookie contains without parsing it, just return it as is and display it here.
wait this string
not json
Giant Angora
try it
const user = JSON.parse(userCookie.value)
your all code is ok else parsing JSON
I put together a quick code, and this is the result, it works.
const jsonString = { name: 'John Doe', email: 'john.doe@example.com', age: 30 };
const user = JSON.stringify(jsonString);
console.log(JSON.parse(user).name);
@Giant Angora try it
ts
const user = JSON.parse(userCookie.value)
Bigheaded antOP
But it gives me an error sir if the cookie is empty.
@HEDI Please show me what the userCookie contains without parsing it, just return it as is and display it here.
Bigheaded antOP
It looks like this without parsing it.
dude this string
this
@Bigheaded ant Sorry wrong code.
Bigheaded antOP
Yeah, because I set it as stringify from the server.
@Bigheaded ant It looks like this without parsing it.
Giant Angora
what is code of getCookies?
Bigheaded antOP
I think it's same as in the browser.
It would be in a string twice, and I parse it once, and it remains a string.
Giant Angora
it is string bcoz its there is single quote at the start and then double
json starts with
[
or {
Giant Angora
e.g.
{"a":"a","b":"b"}
["a","b"]
first verson
@Giant Angora it is string bcoz its there is single quote at the start and then double
Bigheaded antOP
But I have already parsed in the layout, why it still on string.
' "
That's why when you parse, "
it remains, but it is still a string because of that.@HEDI ' " That's why when you parse, " it remains, but it is still a string because of that.
Bigheaded antOP
Ohh, so I need to double parsing.
Or I send the original data from the server?
And then only need one parse.
Giant Angora
import { cookies } from 'next/headers';
export async function getSession() {
const cookieStore = await cookies();
const sessionCookie = cookieStore.get('__u__');
return sessionCookie ? JSON.parse(sessionCookie.value) : null;
}
const session = await getSession();
const user = session.user
@Bigheaded ant Or I send the original data from the server?
Simply send the original data.
Answer
Giant Angora
what is your
setCookies
function, what lib are u using?@Giant Angora ts
import { cookies } from 'next/headers';
export async function getSession() {
const cookieStore = await cookies();
const sessionCookie = cookieStore.get('__u__');
return sessionCookie ? JSON.parse(sessionCookie.value) : null;
}
const session = await getSession();
const user = session.user
Bigheaded antOP
But it needs double-parse, right sir?
Giant Angora
instead of
"use server"
add import "server-only"
and try your code again@Giant Angora instead of `"use server"` add `import "server-only"` and try your code again
But that doesn't change the fact that it receives a string.
Giant Angora
because
"use server"
is used to make all exported functions as server actions@HEDI Simply send the original data.
Bigheaded antOP
Oke it's working sir, I just call the specific data directly and it's rendered.
Giant Angora
😃