什么是从JSON对象数组中填充ReactJS选择字段的最简单方法?

huangapple go评论80阅读模式
英文:

What's the easiest way to populate a ReactJS select field with user names from a JSON object array?

问题

我正在尝试创建我的第一个React js项目,并且需要一些关于选择选项的帮助。
所以,我有这个JSON数据文件:

  1. {
  2. "users": [
  3. {
  4. "id": "1",
  5. "name": "Anton Tur",
  6. "username": "nosensejk"
  7. },
  8. {
  9. "id": "2",
  10. "name": "Peggy Sonaya",
  11. "username": "Peggaya"
  12. },
  13. {
  14. "id": "3",
  15. "name": "Joseph Maguire",
  16. "username": "Joemag"
  17. }
  18. ],
  19. "transports": [
  20. {
  21. "id": "T1",
  22. "name": "MAZ 2105",
  23. "type": "bus"
  24. },
  25. {
  26. "id": "T2",
  27. "name": "MAZ 2106",
  28. "type": "bus"
  29. },
  30. {
  31. "id": "T3",
  32. "name": "MAZ 2205",
  33. "type": "trolleybus"
  34. },
  35. {
  36. "id": "T4",
  37. "name": "MAZ 2307",
  38. "type": "tram"
  39. }
  40. ]
  41. }

可以有人向我展示如何使用选择字段来显示用户的名称的最简单方法吗?提前感谢。

以下是我的JS文件中的一些代码:

  1. import React from 'react';
  2. import db from './../../node_modules/server/db.json';
  3. function calculate() {
  4. return (
  5. <div>
  6. <select>
  7. <option value="choose" disabled defaultValue>
  8. -- 选择用户 --
  9. </option>
  10. {db.users.map((user) => (
  11. <option key={user.id} value={user.id}>
  12. {user.name}
  13. </option>
  14. ))}
  15. </select>
  16. </div>
  17. );
  18. }
  19. export default calculate;
英文:

I'm trying to create my first project in React js and I need some help with select option.
So, I have this JSON data file:

  1. {
  2. &quot;users&quot;: [
  3. {
  4. &quot;id&quot;: &quot;1&quot;,
  5. &quot;name&quot;: &quot;Anton Tur&quot;,
  6. &quot;username&quot;: &quot;nosensejk&quot;
  7. },
  8. {
  9. &quot;id&quot;: &quot;2&quot;,
  10. &quot;name&quot;: &quot;Peggy Sonaya&quot;,
  11. &quot;username&quot;: &quot;Peggaya&quot;
  12. },
  13. {
  14. &quot;id&quot;: &quot;3&quot;,
  15. &quot;name&quot;: &quot;Joseph Maguire&quot;,
  16. &quot;username&quot;: &quot;Joemag&quot;
  17. }
  18. ],
  19. &quot;transports&quot;: [
  20. {
  21. &quot;id&quot;: &quot;T1&quot;,
  22. &quot;name&quot;: &quot;MAZ 2105&quot;,
  23. &quot;type&quot;: &quot;bus&quot;
  24. },
  25. {
  26. &quot;id&quot;: &quot;T2&quot;,
  27. &quot;name&quot;: &quot;MAZ 2106&quot;,
  28. &quot;type&quot;: &quot;bus&quot;
  29. },
  30. {
  31. &quot;id&quot;: &quot;T3&quot;,
  32. &quot;name&quot;: &quot;MAZ 2205&quot;,
  33. &quot;type&quot;: &quot;trolleybus&quot;
  34. },
  35. {
  36. &quot;id&quot;: &quot;T4&quot;,
  37. &quot;name&quot;: &quot;MAZ 2307&quot;,
  38. &quot;type&quot;: &quot;tram&quot;,
  39. }
  40. ]
  41. }

Can anyone show me the easiest way to use a select field to display, for example, users' names? Thank you in advance.

Here is some code in my JS file

  1. import React from &#39;react&#39;;
  2. import db from &#39;./../../node_modules/server/db.json&#39;;
  3. function calculate(){
  4. return(
  5. &lt;div&gt;
  6. &lt;select&gt;
  7. &lt;option value=&quot;choose&quot; disabled selected=&quot;selected&quot;&gt;
  8. -- Select user --
  9. &lt;/option&gt;
  10. {db.users.name}
  11. &lt;/select&gt;
  12. &lt;/div&gt;
  13. );
  14. }
  15. export default calculate;

答案1

得分: 1

  1. const data = {
  2. users: [
  3. {
  4. id: "1",
  5. name: "Anton Tur",
  6. username: "nosensejk"
  7. },
  8. {
  9. id: "2",
  10. name: "Peggy Sonaya",
  11. username: "Peggaya"
  12. },
  13. {
  14. id: "3",
  15. name: "Joseph Maguire",
  16. username: "Joemag"
  17. }
  18. ],
  19. transports: [
  20. {
  21. id: "T1",
  22. name: "MAZ 2105",
  23. type: "bus"
  24. },
  25. {
  26. id: "T2",
  27. name: "MAZ 2106",
  28. type: "bus"
  29. },
  30. {
  31. id: "T3",
  32. name: "MAZ 2205",
  33. type: "trolleybus"
  34. },
  35. {
  36. id: "T4",
  37. name: "MAZ 2307",
  38. type: "tram"
  39. }
  40. ]
  41. };
  42. export default function Calculate() {
  43. return (
  44. <div className="App">
  45. <h1>Hello CodeSandbox</h1>
  46. <h2>Start editing to see some magic happen!</h2>
  47. <select>
  48. {data.users.map((user) => {
  49. return <option key={user.id} value={user.id}>{user.name}</option>;
  50. })}
  51. </select>
  52. </div>
  53. );
  54. }

请注意,组件名称应以大写字母开头,例如 Calculate

英文:
  1. const data = {
  2. users: [
  3. {
  4. id: &quot;1&quot;,
  5. name: &quot;Anton Tur&quot;,
  6. username: &quot;nosensejk&quot;
  7. },
  8. {
  9. id: &quot;2&quot;,
  10. name: &quot;Peggy Sonaya&quot;,
  11. username: &quot;Peggaya&quot;
  12. },
  13. {
  14. id: &quot;3&quot;,
  15. name: &quot;Joseph Maguire&quot;,
  16. username: &quot;Joemag&quot;
  17. }
  18. ],
  19. transports: [
  20. {
  21. id: &quot;T1&quot;,
  22. name: &quot;MAZ 2105&quot;,
  23. type: &quot;bus&quot;
  24. },
  25. {
  26. id: &quot;T2&quot;,
  27. name: &quot;MAZ 2106&quot;,
  28. type: &quot;bus&quot;
  29. },
  30. {
  31. id: &quot;T3&quot;,
  32. name: &quot;MAZ 2205&quot;,
  33. type: &quot;trolleybus&quot;
  34. },
  35. {
  36. id: &quot;T4&quot;,
  37. name: &quot;MAZ 2307&quot;,
  38. type: &quot;tram&quot;
  39. }
  40. ]
  41. };
  42. export default function Calculate() {
  43. return (
  44. &lt;div className=&quot;App&quot;&gt;
  45. &lt;h1&gt;Hello CodeSandbox&lt;/h1&gt;
  46. &lt;h2&gt;Start editing to see some magic happen!&lt;/h2&gt;
  47. &lt;select&gt;
  48. {data.users.map((user) =&gt; {
  49. return &lt;option key={user.id} value={user.id}&gt;{user.name}&lt;/option&gt;;
  50. })}
  51. &lt;/select&gt;
  52. &lt;/div&gt;
  53. );
  54. }

Please keep in mind that component names should start with a capital such as Calculate

huangapple
  • 本文由 发表于 2023年5月24日 20:53:45
  • 转载请务必保留本文链接:https://go.coder-hub.com/76323771.html
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定