如何通过搜索从JSON数组中获取并显示指定NBA球员first_name？

问题分析 #

当前代码的核心问题：

• 后端返回的playerName是球员名数组，但前端直接用nbaData.playerName === playerSearch把数组和字符串做全等比较，永远不会匹配成功
• 仅返回首个元素的方式只能显示单个球员，无法实现搜索匹配逻辑

修复方案（两种可选） #

方案一：前端处理数组匹配（快速修改） #

修改前端fetch请求代码，遍历返回的球员数组，查找是否存在匹配项：

const nbaForm = document.querySelector('form')
const search = document.querySelector('input')
const messageOne = document.querySelector('#player-1')

nbaForm.addEventListener('submit', (event) => {
    event.preventDefault()
    const playerSearch = search.value.trim()

    messageOne.textContent = 'Loading...'

    fetch('http://localhost:4000/nba').then((response) => {
        response.json().then(nbaData => {
            // 遍历球员数组查找匹配项，支持大小写不敏感
            const matchedPlayer = nbaData.playerName.find(name => 
                name.toLowerCase() === playerSearch.toLowerCase()
            )

            if (matchedPlayer) {
                messageOne.textContent = `找到球员：${matchedPlayer}`
            } else {
                messageOne.textContent = '未找到该球员'
            } 
        })
    })
})

方案二：后端接收搜索参数并过滤（更优，减少数据传输） #

让前端把搜索关键词传给后端，后端直接返回匹配结果，降低前端数据处理压力：

后端Node.js路由修改：

app.get('/nba', (req,res) => {
    const searchName = req.query.name?.toLowerCase() // 获取前端传递的搜索参数
    networkManager.nbaPlayerData((data)=>{
        let nbaPlayer = []
     
        for(var i=0; i<data.data.length; i++){
            const firstName = data.data[i].first_name.toLowerCase()
            // 无搜索参数则返回全部，有参数则只返回匹配项
            if (!searchName || firstName === searchName) {
                nbaPlayer.push(data.data[i].first_name)
            }
        }
        console.log(nbaPlayer)
        res.send({ 
            playerName: nbaPlayer
        })
    })
})

前端fetch请求修改：

const nbaForm = document.querySelector('form')
const search = document.querySelector('input')
const messageOne = document.querySelector('#player-1')

nbaForm.addEventListener('submit', (event) => {
    event.preventDefault()
    const playerSearch = search.value.trim()

    if (!playerSearch) {
        messageOne.textContent = '请输入球员名'
        return
    }

    messageOne.textContent = 'Loading...'

    // 将搜索参数编码后拼接到请求URL
    fetch(`http://localhost:4000/nba?name=${encodeURIComponent(playerSearch)}`).then((response) => {
        response.json().then(nbaData => {
            if (nbaData.playerName.length > 0) {
                messageOne.textContent = `找到球员：${nbaData.playerName.join(', ')}`
            } else {
                messageOne.textContent = '未找到该球员'
            } 
        })
    })
})

额外优化点 #

• 模板中的<h1>{{playerName}}</h1>会直接输出数组字符串（如["LeBron","Ron",...]），可删除或改为Handlebars循环展示所有球员：

{{#each playerName}}
    <p>{{this}}</p>
{{/each}}

• 两种方案均添加了大小写不敏感匹配，提升用户搜索体验
• 方案二补充了空输入校验，避免无效请求

内容的提问来源于stack exchange，提问作者Montes