如何使用我的 MYSQL 数据库中的数据填充 JSON 数组？答案

【问题标题】：How do I populate a JSON array with the data from my MYSQL database?如何使用我的 MYSQL 数据库中的数据填充 JSON 数组？
【发布时间】：2021-03-12 02:23:54
【问题描述】：

所以我有一个可以使用 ExpressJS 和 NodeJS 查询的数据库。数据库是一个 MySQL 数据库。里面的数据是这样的：

id: 1
username: 'someUsername'
email: 'randomEmail@email.email'

我想以某种方式将数据库中的数据放入 JSON 列表中，然后对其进行映射并将其显示给用户。我推断，实现此目的的另一个选择是填充应用程序的状态。我想创建一些类组件，添加一个 mapStateToProps 并将查询返回的数据分配给状态，然后在 Reactapp 本身中使用来自状态的数据。我不确定这是否有效。

【问题讨论】：

标签： mysql node.js reactjs express

【解决方案1】：

嗯，您从 SQL 查询中获得的返回数据本身就是一个对象数组，您的答案在于简单地迭代返回的数据并将其分配给您喜欢的任何对象。

let queryResults = returnedQueryData // data returned from SQL query
let jsonarray = {}

for (row in queryResults) {
  jsonarray[row.id] = {
    id: row['id'],
    username: row['username'],
    email: row['email']
  }

要访问 JSON 数组中的数据，请使用

Object.keys(jsonarray).forEach(e => {
    // Here e is the object element from the JSON array
}

【讨论】：

是不是每次循环都会覆盖jsonarray？

【解决方案2】：

这是从后端 onLoad 获取数据并使用 .map 显示数据而不使用 redux (mapstatetoprops) 的组件的最小代码示例

const DisplayData = () => {

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

     
     const fetchData = async () => {
         const results = await fetch(url).then(res => res.json());
         setData(data)
     }

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

【讨论】：