How to return JSON object in Javascript?

Question

I am having issues with returning a JSON object. When I render the webpage, nothing shows up. Does anyone know how to fix this? Sorry, I am new to Javascrtipt.

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

You can use JSON.stringify() https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/JSON/stringify

The third argument in JSON.stringify() provides new lines and indentation. If only the first argument is provided, the string will be one long line.

Your example with fix (I changed your <text> to <p> as I have never heard of a <text> HTML element):

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>
    </>
  )
}