javascript - 如何在 Javascript 中返回 JSON 对象？

Question

我在返回 JSON 对象时遇到问题。当我渲染网页时，什么都没有显示。有谁知道如何解决这一问题？抱歉，我是 Javasctipt 的新手。

import React, { useEffect, useState, useContext } from 'react'

export const MarketData = () => {
  var obj = {
    width: '100%',
    height: '100%',
    symbolsGroups: [
      {
        name: 'Indices',
        originalName: 'Indices',
        symbols: [
          {
            name: 'INDEX:DEU30',
            displayName: 'DAX Index',
          },
          {
            name: 'FOREXCOM:UKXGBP',
            displayName: 'FTSE 100',
          },
        ],
      },
      ...
    ],
    showSymbolLogo: true,
    colorTheme: 'dark',
    isTransparent: false,
    locale: 'en',
    largeChartUrl:
      'https://bondintelligence.cloud.looker.com/extensions/bond_intelligence_webpage::helloworld-js/',
  }

  return (
    <>
      <text>{obj}</text>
    </>
  )
}

Answer 1

您可以使用JSON.stringify() https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/JSON/stringify

中的第三个参数JSON.stringify()提供了新行和缩进。如果仅提供第一个参数，则字符串将是一个长行。

您的修复示例（我将您更改<text>为，<p>因为我从未听说过<text>HTML 元素）：

import React, { useEffect, useState, useContext } from 'react'

export const MarketData = () => {
  var obj = {
    width: '100%',
    height: '100%',
    symbolsGroups: [
      {
        name: 'Indices',
        originalName: 'Indices',
        symbols: [
          {
            name: 'INDEX:DEU30',
            displayName: 'DAX Index',
          },
          {
            name: 'FOREXCOM:UKXGBP',
            displayName: 'FTSE 100',
          },
        ],
      },
      ...
    ],
    showSymbolLogo: true,
    colorTheme: 'dark',
    isTransparent: false,
    locale: 'en',
    largeChartUrl:
      'https://bondintelligence.cloud.looker.com/extensions/bond_intelligence_webpage::helloworld-js/',
  }

  var objAsString = JSON.stringify(obj, null, 2)

  return (
    <>
      <p>{objAsString}</p>
    </>
  )
}