如何在键更改的 React 中访问 JSON 对象

Question

我的 React 应用程序遇到了困难。我正在调用 AlphaVantage API 来获取 RSI 数据。我想像这样获取最新的 RSI 值：

    const cryptos = ['AAPL', 'MSFT']
    const arr = []
    for (var i = 0; i < cryptos.length; i++) {
      const cryptoUrl =
        'https://www.alphavantage.co/query?function=RSI&symbol=' +
        cryptos[i] +
        `&interval=weekly&time_period=10&series_type=open&apikey=${apikey}`
      arr.push(axios.get(cryptoUrl))
    }

    Promise.all(arr)
      .then(response =>
        response.map(res =>
          console.log(
            res.data['Technical Analysis: RSI']['2019-08-30'][' RSI'],
            res.data['Meta Data']['1: Symbol']
          )
        )
      )
      .catch(err => console.log(err))
  }

除

外，一切正常

res.data['Technical Analysis: RSI']['2019-08-30'][' RSI'],

我正在尝试访问最新的 RSI 值，但是，最新值的时间总是在变化。我不知道如何得到它。

JSON 看起来像这样：

请注意屏幕截图第 15 行的 'format' 键更改为包括日期和时间。

谢谢，如果您需要更多信息，请告诉我。

Answer 1

由于键是有序的，您可以使用 Object.keys(yourJSON).reduce 访问它们并找到最新的值。

提取该值并return它。这应该可以让您访问最新的值。

Answer 2

老实说，混合格式的 API 设计很糟糕。

幸运的是，这两种格式都可以通过简单地将其作为参数传递给 new Date().

来解析

new Date('2019-08-30')
new Date('2019-09-06 15:21:38')

一旦转换为 Date 对象，您可以简单地使用 < 和 > 符号来比较它们以确定哪个是最新的。

要获取最新的，您可以使用 Object.keys() 查看所有值，比较它们，然后选择最新的。在下面的示例中，我使用 reduce() 来查找最新的。

const data = {
  'Technical Analysis: RSI': {
    '2019-08-01 16:00:00': {
      a: 1
    },
    '2019-09-01': {
      b: 1
    },
    '2019-08-15': {
      c: 1
    }
  }
};

const newest = Object.keys(data['Technical Analysis: RSI'])
  .reduce((newest, time) => new Date(time) > new Date(newest) ? time : newest, '1980-01-01'); // '1980-01-01' is just an old default value to start with.
  
console.log(newest, data['Technical Analysis: RSI'][newest]);

Answer 3

如果最新值附有时间（例如，它包括日期和时间）而其他值没有，您始终可以通过正则表达式获取附有时间戳的对象的值.

例如：

let data;
for(let key in res.data['Technical Analysis: RSI']) {
  if(key.match(/\d{4}-\d{2}-\d{2} \d{2}:\d{2}:\d{2}/)
    data = res.data['Technical Analysis: RSI'][key]['RSI'];
    break;
}

或者，您可以匹配“:”字符，因为它似乎只在时间出现时出现。

Answer 4

您还可以传递 Last Refreshed 属性，即 API returns，作为 'date' 属性。这样您总能得到最近的更新，不必 fiddle 使用索引或将事物转换为日期对象。

你需要提供你的 API 密钥，但我把它放在一起并且它有效..（它实际上看起来像使用 '123' 作为 API 密钥 =/ )

https://codepen.io/oze4/pen/JjPMVmy?editors=1010

let lastRefresh = res.data["Meta Data"]["3: Last Refreshed"];
let stockInfo = {
  symbol: res.data["Meta Data"]["1: Symbol"],
  price: res.data["Technical Analysis: RSI"][lastRefresh]["RSI"]
};

如何在键更改的 React 中访问 JSON 对象

How to access JSON object in React where the keys change

javascript

reactjs

alpha-vantage