What is the best way to transfer the information from my MYSQL database into a JSON array?

Question

What is the best way to transfer the information from my MYSQL database into a JSON array?

After setting up a MySQL database that I can query using ExpressJS and NodeJS, I found the following data structure:

id: 1
username: 'someUsername'
email: '<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="9fedfef1fbf0f2daf2fef6f3dffaf2fef6f3b1faf2fef6f3">[email protected]</a>'

My goal now is to transform this database data into a JSON array, then iterate over it to display to the user. One approach I considered was populating the app's state. This involved creating a class component, adding a mapStateToProps function to assign the queried data to the state, and subsequently using this state data within the Reactapp itself. However, I am uncertain about the effectiveness of this method.

mysql node.js reactjs express

Answer 1

Answer №1

Here is a simple code snippet that demonstrates how to fetch data from a backend when the component loads, and then display the fetched data using .map without relying on redux (mapstatetoprops).

const DisplayData = () => {

     const [ data, setData ] = useState([]);

     
    const fetchDataFromBackend = async () => {
         const response = await fetch(url);
         const jsonData = await response.json();
         setData(jsonData);
    }

     useEffect(() => {
         fetchDataFromBackend()
     },[])

 return ( 
    <div>
        {data.map(item => <p>{item.name}</p>) }
        <pre>
            { JSON.stringify(data, null, 4) }
        </pre>
    </div>
}

Answer 2

Here is a simple code snippet that demonstrates how to fetch data from a backend when the component loads, and then display the fetched data using .map without relying on redux (mapstatetoprops).

const DisplayData = () => {

     const [ data, setData ] = useState([]);

     
    const fetchDataFromBackend = async () => {
         const response = await fetch(url);
         const jsonData = await response.json();
         setData(jsonData);
    }

     useEffect(() => {
         fetchDataFromBackend()
     },[])

 return ( 
    <div>
        {data.map(item => <p>{item.name}</p>) }
        <pre>
            { JSON.stringify(data, null, 4) }
        </pre>
    </div>
}

Answer 3

Answer №2

When you receive the result data from your SQL query, it is in the form of an array containing objects. The key to utilizing this data effectively is by iterating through it and assigning it to a target object.

let sqlQueryData = returnSQLResults // retrieve data from SQL query
let jsonObject = {}

for (entry in sqlQueryData) {
  jsonObject[entry.id] = {
    id: entry['id'],
    name: entry['name'],
    age: entry['age']
  }

To access information within the JSON object, you can use

Object.keys(jsonObject).forEach(element => {
    // 'element' represents an object from the JSON array
}

Answer 4

When you receive the result data from your SQL query, it is in the form of an array containing objects. The key to utilizing this data effectively is by iterating through it and assigning it to a target object.

let sqlQueryData = returnSQLResults // retrieve data from SQL query
let jsonObject = {}

for (entry in sqlQueryData) {
  jsonObject[entry.id] = {
    id: entry['id'],
    name: entry['name'],
    age: entry['age']
  }

To access information within the JSON object, you can use

Object.keys(jsonObject).forEach(element => {
    // 'element' represents an object from the JSON array
}

What is the best way to transfer the information from my MYSQL database into a JSON array?

Answer №1

Answer №2

Similar questions

Issue: TableHead inside an Expandable Row in MUI-Datatable is being duplicated for each row, causing the table to not be centered.Explanation: The

Automatically identifying cloud functions ready for deployment with the gcloud command line interface

I encountered an issue when attempting to execute an action as I received an error message indicating that the dispatch function was not

The Axios API request is made, but fails to retrieve any data back to the client

Creating a PHP script that retrieves data from JavaScript and stores it in MySQL can be accomplished by using AJAX to send the

When running fs.rmSync on Ubuntu, an error is thrown stating that undefined is not a

styling a flex container with aligned text and buttons

The npm ping feature is causing command prompt windows to open

I am eager to re-execute the query by simply clicking on buttons, however, it seems to not be functioning properly

Utilizing MongooseJS's Find Method for Retrieving Data by Reference

When uploading files, a NodeJS application behind an Apache2 reverse proxy may encounter the error message "413 Request Entity Too Large."

Exclusive to Safari: Codesandbox is experiencing difficulties retrieving data from the localhost server

Storing the values of a React JS application in local storage using

Types are not appearing in @types/node

Error occurred while making a request in React using Axios: TypeError - Unable to retrieve the 'token' property as it is undefined

List of Nodes with five links

Struggling to locate the node module 'node:fs' while working with JavaScript and attempting to deploy to my personal Linux server

Tips for transferring props and states between sibling components using react hooks

Am I using Node.js, Express, and Promises correctly in my code?

React-Toolbox: Attempting to horizontally align the Cards side by side