英文:
What's the easiest way to populate a ReactJS select field with user names from a JSON object array?
问题
我正在尝试创建我的第一个React js项目，并且需要一些关于选择选项的帮助。
所以，我有这个JSON数据文件：
{
"users": [
{
"id": "1",
"name": "Anton Tur",
"username": "nosensejk"
},
{
"id": "2",
"name": "Peggy Sonaya",
"username": "Peggaya"
},
{
"id": "3",
"name": "Joseph Maguire",
"username": "Joemag"
}
],
"transports": [
{
"id": "T1",
"name": "MAZ 2105",
"type": "bus"
},
{
"id": "T2",
"name": "MAZ 2106",
"type": "bus"
},
{
"id": "T3",
"name": "MAZ 2205",
"type": "trolleybus"
},
{
"id": "T4",
"name": "MAZ 2307",
"type": "tram"
}
]
}
可以有人向我展示如何使用选择字段来显示用户的名称的最简单方法吗？提前感谢。
以下是我的JS文件中的一些代码：
import React from 'react';
import db from './../../node_modules/server/db.json';
function calculate() {
return (
<div>
<select>
<option value="choose" disabled defaultValue>
-- 选择用户 --
</option>
{db.users.map((user) => (
<option key={user.id} value={user.id}>
{user.name}
</option>
))}
</select>
</div>
);
}
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:
{
"users": [
{
"id": "1",
"name": "Anton Tur",
"username": "nosensejk"
},
{
"id": "2",
"name": "Peggy Sonaya",
"username": "Peggaya"
},
{
"id": "3",
"name": "Joseph Maguire",
"username": "Joemag"
}
],
"transports": [
{
"id": "T1",
"name": "MAZ 2105",
"type": "bus"
},
{
"id": "T2",
"name": "MAZ 2106",
"type": "bus"
},
{
"id": "T3",
"name": "MAZ 2205",
"type": "trolleybus"
},
{
"id": "T4",
"name": "MAZ 2307",
"type": "tram",
}
]
}
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
import React from 'react';
import db from './../../node_modules/server/db.json';
function calculate(){
return(
<div>
<select>
<option value="choose" disabled selected="selected">
-- Select user --
</option>
{db.users.name}
</select>
</div>
);
}
export default calculate;
答案1
得分: 1
const data = {
users: [
{
id: "1",
name: "Anton Tur",
username: "nosensejk"
},
{
id: "2",
name: "Peggy Sonaya",
username: "Peggaya"
},
{
id: "3",
name: "Joseph Maguire",
username: "Joemag"
}
],
transports: [
{
id: "T1",
name: "MAZ 2105",
type: "bus"
},
{
id: "T2",
name: "MAZ 2106",
type: "bus"
},
{
id: "T3",
name: "MAZ 2205",
type: "trolleybus"
},
{
id: "T4",
name: "MAZ 2307",
type: "tram"
}
]
};
export default function Calculate() {
return (
<div className="App">
<h1>Hello CodeSandbox</h1>
<h2>Start editing to see some magic happen!</h2>
<select>
{data.users.map((user) => {
return <option key={user.id} value={user.id}>{user.name}</option>;
})}
</select>
</div>
);
}
请注意，组件名称应以大写字母开头，例如 Calculate。
英文:
const data = {
users: [
{
id: "1",
name: "Anton Tur",
username: "nosensejk"
},
{
id: "2",
name: "Peggy Sonaya",
username: "Peggaya"
},
{
id: "3",
name: "Joseph Maguire",
username: "Joemag"
}
],
transports: [
{
id: "T1",
name: "MAZ 2105",
type: "bus"
},
{
id: "T2",
name: "MAZ 2106",
type: "bus"
},
{
id: "T3",
name: "MAZ 2205",
type: "trolleybus"
},
{
id: "T4",
name: "MAZ 2307",
type: "tram"
}
]
};
export default function Calculate() {
return (
<div className="App">
<h1>Hello CodeSandbox</h1>
<h2>Start editing to see some magic happen!</h2>
<select>
{data.users.map((user) => {
return <option key={user.id} value={user.id}>{user.name}</option>;
})}
</select>
</div>
);
}
Please keep in mind that component names should start with a capital such as Calculate
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论