Here is the link to all the results

http://hyeumine.com/forumGetPosts.php

const [posts,setPosts] = useState(null)

useEffect(()=>{
    axios.get("http://hyeumine.com/forumGetPosts.php")
    .then((response)=>{
        setPosts(response.data)
        console.log(posts)
    })
},[auth,refresher,userLogged])

CodePudding user response：

try with this code: result img

import { useState, useEffect } from "react";
import axios from "axios";
import "./App.css";

function App() {
  const [data, setData] = useState([]);

  const getingData = async () => {
    try {
      const res = await axios.get("http://hyeumine.com/forumGetPosts.php");

      console.log(res.data);

      setData(res.data);
    } catch (error) {
      alert(error.message);
    }
  };
  useEffect(() => {
    getingData();
  }, []);

  return (
    <div className="App">
      {data.map((item, id) => {
        return (
          <div key={id} style={{ backgroundColor: "skyblue" }}>
            <h1>
              {item.post}
            </h1>
            <h2>
              {item.user}
            </h2>
            <h3>
              {item.date}
            </h3>
          </div>
        );
      })}
    </div>
  );
}

export default App;

CodePudding user response：

it's not really welcome to post a link to resource here instead of actual code. Normally what you do is post a sample and code and a link.

So first you use something like beatify json, here

The sample of output:

[
   {
      "id":"1",
      "post":"Hello World",
      "user":"hyeuminer",
      "date":"2022-12-13 17:23:16",
      "reply":[
         {
            "reply":"This is great",
            "user":"hyeuminer",
            "date":"2022-12-13 17:12:01"
         },
         {
            "reply":"Awesome",
            "user":"simon",
            "date":"2022-12-13 23:42:09"
         },
         {
            "reply":"(id, reply) => {\n (0,axios__WEBPACK_IMPORTED_MODULE_3__[\"default\"])(\"http:\/\/hyeumine.com\/forumReplyPost.php\", {\n method: \"POST\",\n headers: {\n \"Content-Type\": \"application\/x-www-for",
            "user":"ssdadsadasd",
            "date":"2022-12-13 20:47:45"
         },
      ]
   },
   {
      "id":"2",
      "post":"From the other side",
      "user":"hyeumine",
      "date":"2022-12-13 18:45:23",
      "reply":[
         {
            "reply":"this is exciting",
            "user":"heroo",
            "date":"2022-12-13 23:47:58"
         },
         {
            "reply":"test reply",
            "user":"heroo",
            "date":"2022-12-13 23:47:58"
         },
         {
            "reply":"Loveyou",
            "user":"hyeumine",
            "date":"2022-12-13 17:11:49"
         },
      ]
   },
   {
      "id":"3",
      "post":"Hello There",
      "user":"john",
      "date":"2022-12-13 19:49:24",
   },
]

So now you can see that data is really looking quite simple. Basically you have a post, witch can have array of replays. Please not that you also have some errors like this:

"reply":"(id, reply) => {\n (0,axios__WEBPACK_IMPORTED_MODULE_3__[\"default\"])(\"http:\/\/hyeumine.com\/forumReplyPost.php\", {\n method: \"POST\",\n headers: {\n \"Content-Type\": \"application\/x-www-for",
            "user":"ssdadsadasd",

So let's now write component that gonna take data as json from your link and do a create a structure that you want:

import "./styles.css";

import data from "./sample-data.json";

export default function App() {
  console.log(data);
  return (
    <div className="App" style={{ textAlign: "left" }}>
      <ul>
        {data.map((post) => (
          <li key={post.id}>
            <div>{post.id}</div>
            <div>{post.post}</div>
            <div>{post.user}</div>
            <div>{post.date}</div>
            <ul>
              {post.reply?.map((replay, i) => (
                <li key={`${post.id}-replay-${i}`}>
                  <div>{replay.reply}</div>
                  <div>{replay.user}</div>
                  <div>{replay.date}</div>
                </li>
              ))}
            </ul>
          </li>
        ))}
      </ul>
    </div>
  );
}

and a link to codesandbox

CodePudding user response：

Use the fetch API to fetch the JSON results from the given URL and store them in a variable. Then, use the map method to map the results and return a list of React elements. Then render the list of elements inside a ul element.

import React from "react";

function App() {
  // Fetch the JSON results from the URL and store them in a variable
  const results = fetch("http://hyeumine.com/forumGetPosts.php")
    .then((response) => response.json())
    .then((json) => json);

  // Map the results and return a list of React elements
  const items = results.map((result) => (
    <li key={result.id}>
      <p>{result.post}</p>
      <p>{result.user}</p>
    </li>
  ));

  return (
    <div>
      <h1>Results</h1>
      <ul>{items}</ul>
    </div>
  );
}

export default App;