如何在 Javascript 中返回 JSON 对象？答案

【问题标题】：How to return JSON object in Javascript?如何在 Javascript 中返回 JSON 对象？
【发布时间】：2023-03-27 08:13:01
【问题描述】：

我在返回 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>
    </>
  )
}

【问题讨论】：

标签： javascript json looker

【解决方案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>
    </>
  )
}

【讨论】：