23 Replies
solution to extract info from wordpress json api:
"use client"
import Image from 'next/image'
import {fetchData} from "./api"
import { useEffect, useState } from 'react'
export default function Home() {
const [pageData, setPageData] = useState(null);
const [text1Content, setText1Content] = useState('');
async function pullJson(){ const response = await fetch("http://localhost:10004/wp-json/wp/v2/pages/11") const responseData = await response.json() setPageData(responseData) console.log(responseData) } useEffect(() => { pullJson() },[]) // useEffect(() => { // if (pageData) { // const parsedHTML = new DOMParser().parseFromString(pageData.content.rendered, 'text/html'); // const text1Element = parsedHTML.getElementById('text-1'); // if (text1Element) { // setText1Content(text1Element.innerHTML); // } // } // },[pageData]) useEffect(() => { if (pageData) { const parsedHTML = new DOMParser().parseFromString(pageData.content.rendered, 'text/html'); const text1Element = parsedHTML.getElementById('text-1'); if (text1Element) { const paragraphElement = text1Element.querySelector('p'); if (paragraphElement) { setText1Content(paragraphElement.innerHTML); } } } },[pageData]) return ( <main> <p>{text1Content}</p> <p>loltext</p> <p>loltext</p> </main> ) } --- forgot to add this id, you set it up in elementor as a class-id to be able to extract it by id
async function pullJson(){ const response = await fetch("http://localhost:10004/wp-json/wp/v2/pages/11") const responseData = await response.json() setPageData(responseData) console.log(responseData) } useEffect(() => { pullJson() },[]) // useEffect(() => { // if (pageData) { // const parsedHTML = new DOMParser().parseFromString(pageData.content.rendered, 'text/html'); // const text1Element = parsedHTML.getElementById('text-1'); // if (text1Element) { // setText1Content(text1Element.innerHTML); // } // } // },[pageData]) useEffect(() => { if (pageData) { const parsedHTML = new DOMParser().parseFromString(pageData.content.rendered, 'text/html'); const text1Element = parsedHTML.getElementById('text-1'); if (text1Element) { const paragraphElement = text1Element.querySelector('p'); if (paragraphElement) { setText1Content(paragraphElement.innerHTML); } } } },[pageData]) return ( <main> <p>{text1Content}</p> <p>loltext</p> <p>loltext</p> </main> ) } --- forgot to add this id, you set it up in elementor as a class-id to be able to extract it by id
so what's the problem exactly? What is unmanageable?
@Jochem this its a json file but instead of separating every element into its own value, its all in 1
i thought cms was suppose to make content available for devs so, clients just worry about content but all the content is smashed together
oh, you mean that
content->rendered contains HTML with multiple elements?yeah, the all the content, images everything
so i dont understand how a client would work with a dev as a cms
you just insert that string into your HTML
the thing is thats all the content of the page
then you replace the contents of the body with that
so saw a video of a guy doing that and then doing the css affecting the p and the a of the whole box but i want to be able to control everything
im reading about SEO now to see if and how much this fix affects SEO and performance, or try to use this and find a work around the fix
you can insert the HTML and then change it using normal methods
or if your changes cause reflows or other issues you can load that string into domparser and edit it before you reinsert it into the live document
as for SEO, I'm not really sure how this is any different than any other React app. You're sending a blank page and then having Javascript clientside fill that page with data from the server, that's how half the internet works nowadays
bad for seo
xD
oh yeah, definitely bad, but no worse than any other React app
thats what i thought for a second, but i dont know much about seos or apis affecting it
im reading some gpt seo answers and i dont if to just await quick data, put into the code make it invisible so it gets index but the have everything else load after
if you are using a metaframework you can prerender that is where headless really benefits, but also you have to rebuild when content changes so #depends how you need it.
no one really knows how SEO works, so I can't even imagine what a mess ChatGPT would produce... please don't use chatgpt if you're trying to learn about things
yeah also its 2year old seo
just in general, ChatGPT is a pro tool. You have to be able to judge if its answers are halucinated BS or not, and as a beginner you just don't have that context
yeah i take all this with a grain of salt, i tried to learn react native with this, only made mad
Except regex's. 😀
you have to abandon all hope if you want to learn regexes so yeah, then chatgpt is fine 😄