如何从 Javascript 对象访问属性？答案

【问题标题】：How to access properties from a Javascript object?如何从 Javascript 对象访问属性？
【发布时间】：2019-09-25 02:03:15
【问题描述】：

我有一个 api 调用，它在控制台中产生以下结果（在使用 map() 配对之后）。

{…}

CHANGE24HOUR: "$ 11.16"

CHANGEDAY: "$ 3.31"

CHANGEPCT24HOUR: "6.73"

CHANGEPCTDAY: "1.90"

FROMSYMBOL: "Ξ"

HIGH24HOUR: "$ 183.38"

HIGHDAY: "$ 183.38"

但是，无论我尝试什么，我都无法获得它的属性。该对象称为“coinStats”。

我尝试了以下方法：

coinStats.HIGHDAY = undefined
coinStats['HIGHDAY'] = undefined
coinStats["HIGHDAY"] = undefined

尝试将其转换为数组以查看是否有助于使用

Object.values(coinStats)  // Would not work

我相信答案非常简单。但我只是不确定它是什么？

原始的原始api结果如下所示：

(1) […]

0: Object { CoinInfo: {…}, RAW: {…}, DISPLAY: {…} }

length: 1

<prototype>: [

我要查找的信息以 DISPLAY -> USD 为单位。我使用了 map() 函数来返回该子对象。

我用来获取数据的代码基本上如下：

const API = 'https://min-api.cryptocompare.com/data/top/mktcapfull?tsym=USD&page=1';

fetch(API)
  .then(results => results.json())
  .then(coinData => {

    const view = coinData.Data.filter(obj => { return obj.CoinInfo.Name === TRX});

  })

const coinFeedAbridged = view.map(item => item.DISPLAY.USD);

const coinStats = coinFeedAbridged[0];

console.dir(coinStats);

例如，我无法访问 coinStats.HIGHDAY...我得到“未定义”。

【问题讨论】：

您的“api 调用”是如何工作的？您如何检索它以及对象的形状是什么？
尝试：console.log(coinFeed) 并发布输出。
这正是我上面所说的。嗯......那来自console.dir(coinFeed)。
它们可能是不可枚举、不可写的属性。检查Object.getOwnPropertyDescriptor(coinFeed, 'HIGHDAY') 的输出。也可能是对象被冻结：检查Object.isFrozen(coinFeed)
如果我们没有重现问题的代码，很难猜测。另一件事是控制台还显示了继承的属性，这可能会导致解释。但是可能会发生很多事情......我们需要mvce

标签： javascript arrays reactjs javascript-objects

【解决方案1】：

fetch 调用是异步的，因此在调用完成之前您无法访问view 变量。代码调用 async 函数并运行下一行，因此 view 变量将未定义。您必须在已知数据的 fetch 回调函数中处理数据。

const API = 'https://min-api.cryptocompare.com/data/top/mktcapfull?tsym=USD&page=1';

  fetch(API)
    .then(results => results.json())
    .then(coinData => {

      const view = coinData.Data.filter(obj => { 
        return obj.CoinInfo.Name === 'TRX'
       });

      const coinFeedAbridged = view.map(item => item.DISPLAY.USD);

      const coinStats = coinFeedAbridged[0];
      console.log(coinStats);

    })
  }

你可以在这个小提琴中测试它。 https://jsfiddle.net/gran7ptk/1/

【讨论】：

我已经能够查看整个对象。我只是无法访问它的属性。虽然在你的小提琴中你使用了 JSON.stringify() 并且我会研究它。
我正在使用 JSON.stringify() 将其显示在屏幕上，您可以将其更改为 console.log，您将在控制台中看到该对象。
看看jsfiddle.net/gran7ptk/2，我正在那里访问coinStats.HIGHDAY
这很好，但我想在 render() 函数中提取单独的属性，而不是使用 setState() 来传递一个属性。这段代码会是什么样子？
您可以将整个对象存储在状态中，并在渲染方法中访问其属性。 jsfiddle.net/gran7ptk/3

【解决方案2】：

换行 - 在文本“TRX”中添加逗号。

 const view = coinData.Data.filter(obj => { return obj.CoinInfo.Name
 === TRX});

到 const view = coinData.Data.filter(obj => { return obj.CoinInfo.Name === "TRX"});

【讨论】：