Javascript 获取JSON API中的第一个数据

我对React的开发比较新。我目前正在做一个商品市场行情器。我使用fetch（）从JSON API获取和呈现数据。以下是JSON的外观：

[
  {
    Symbol: "BIT:COM",
    Ticker: "BIT",
    Name: "Bitumen",
    Country: "commodity",
    Date: "2020-09-30T00:00:00",
    State: "OPEN ",
    Last: 2020,
    Close: 2020,
    CloseDate: "2020-09-30T00:00:00",
    Group: "Industrial",
    URL: "/commodity/bitumen",
    Importance: 100,
    DailyChange: -40,
    DailyPercentualChange: -1.9417,
    WeeklyChange: -284,
    WeeklyPercentualChange: -12.3264,
    MonthlyChange: -560,
    MonthlyPercentualChange: -21.7054,
    YearlyChange: -1140,
    YearlyPercentualChange: -36.0759,
    YTDChange: -1054,
    YTDPercentualChange: -34.2876,
    day_high: 2062,
    day_low: 1930,
    yesterday: 2060,
    lastWeek: 2304,
    lastMonth: 2580,
    lastYear: 3160,
    startYear: 3074,
    decimals: 2,
    unit: "CNY/T",
    frequency: "Daily",
    LastUpdate: "2020-10-05T07:33:00"
  },
  {
    Symbol: "JBP:COM",
    Ticker: "Steel",
    Name: "Steel",
    Country: "commodity",
    Date: "2020-09-30T00:00:00",
    State: "OPEN ",
    Last: 3607,
    Close: 3607,
    CloseDate: "2020-09-30T00:00:00",
    Group: "Industrial",
    URL: "/commodity/steel",
    Importance: 100,
    DailyChange: -13,
    DailyPercentualChange: -0.3591,
    WeeklyChange: -15,
    WeeklyPercentualChange: -0.4141,
    MonthlyChange: -148,
    MonthlyPercentualChange: -3.9414,
    YearlyChange: -42,
    YearlyPercentualChange: -1.151,
    YTDChange: -135,
    YTDPercentualChange: -3.6077,
    day_high: 3628,
    day_low: 3591,
    yesterday: 3620,
    lastWeek: 3622,
    lastMonth: 3755,
    lastYear: 3649,
    startYear: 3742,
    decimals: 2,
    unit: "CNY/T",
    frequency: "Daily",
    LastUpdate: "2020-10-05T05:46:00"
    }
]

如果要查看完整的JSON，请执行以下操作：

这是我呈现数据的方式：

import React, {Component} from "react";
import List from './components/list'

class App extends Component{
    state = {
        data: []
    }

    componentDidMount() {
        fetch('https://api.tradingeconomics.com/markets/commodities/?c=guest:guest&format=json')
            .then(res => res.json())
            .then((data) => {
                this.setState({data: data})
            })
            .catch(console.log)
    }

    render() {
        return (
            <div className={'App'}>
                <List data={this.state.data}/>
            </div>
        )
    }
}

export default App;

import React，{Component}来自“React”；
从“./components/List”导入列表
类应用程序扩展组件{
状态={
数据：[]
}
componentDidMount（）{
取（'https://api.tradingeconomics.com/markets/commodities/?c=guest:guest&format=json')
.then（res=>res.json（））
。然后（（数据）=>{
this.setState（{data:data}）
})
.catch（console.log）
}
render（）{
返回(
)
}
}
导出默认应用程序；

下面是我获取数据的方法：

import React from "react";

const List = ({ data }) => {
    return (
        <div>
            <h1>Commodities</h1>
            {data.map((value) => (
                <div>
                    <h5>Name: {value.Name}</h5>
                    <h5>Ticker: {value.Ticker}</h5>
                    <h5>High: {value.day_high}</h5>
                    <h5>Low: {value.day_low}</h5>
                    <h5>Unit: {value.unit}</h5>
                    <hr/>
                </div>
            ))}
        </div>
    )
}

export default List;

从“React”导入React；
常量列表=（{data}）=>{
返回(
商品
{data.map（（值）=>(
名称：{value.Name}
股票代码：{value.Ticker}
高：{value.day_High}
低：{value.day_Low}
单位：{value.Unit}

))}
)
}
导出默认列表；

---

我的问题是，如何获得第一个数据？假设我只想显示“BIT:COM”中的股票代码、名称和日期。现在用我的代码显示所有数据。感谢您的高级指导。

您可以这样做：

const List = ({ data }) => {
    return (
        <div>
            <h1>Commodities</h1>
            {data.map((value) => (
               value.Name === "BIT:COM" ?
                <div>
                    <h5>Name: {value.Name}</h5>
                    <h5>Ticker: {value.Ticker}</h5>
                    <h5>High: {value.day_high}</h5>
                    <h5>Low: {value.day_low}</h5>
                    <h5>Unit: {value.unit}</h5>
                    <hr/>
                </div> : null
            ))}
        </div>
    )

const List=（{data}）=>{
返回(
商品
{data.map（（值）=>(
value.Name==“位：COM”？
名称：{value.Name}
股票代码：{value.Ticker}
高：{value.day_High}
低：{value.day_Low}
单位：{value.Unit}

：null
))}
)

---

}有两种方法可以做到这一点：

如果您只想显示BIT:COM

const List=（{data}）=>{
返回(
商品
{data.filter（a=>a.Symbol==“BIT:COM”）.map（（value）=>(
名称：{value.Name}
股票代码：{value.Ticker}
高：{value.day_High}
低：{value.day_Low}
单位：{value.Unit}

))}
)
}

如果只想显示第一个数据：

const List=（{data}）=>{
设值=数据[0]
返回(
商品
名称：{value.Name}
股票代码：{value.Ticker}
高：{value.day_High}
低：{value.day_Low}
单位：{value.Unit}

)
}

setState

this.setState（{data:data.filter（row=>row.Symbol==“BIT:COM”）}）时，为什么不尝试过滤数据呢？

像这样谢谢。这很有效！

const List = ({ data }) => {
    return (
        <div>
            <h1>Commodities</h1>
            {data.filter(a => a.Symbol === "BIT:COM").map((value) => (
                <div>
                    <h5>Name: {value.Name}</h5>
                    <h5>Ticker: {value.Ticker}</h5>
                    <h5>High: {value.day_high}</h5>
                    <h5>Low: {value.day_low}</h5>
                    <h5>Unit: {value.unit}</h5>
                    <hr/>
                </div>
            ))}
        </div>
    )
}

const List = ({ data }) => {
    let value = data[0]
    return (
        <div>
            <h1>Commodities</h1>
            <div>
                <h5>Name: {value.Name}</h5>
                <h5>Ticker: {value.Ticker}</h5>
                <h5>High: {value.day_high}</h5>
                <h5>Low: {value.day_low}</h5>
                <h5>Unit: {value.unit}</h5>
                <hr/>
            </div>
        </div>
    )
}