Cannot display JSON objects in React

Question

My JSON file is not being properly displayed by my React script. What am I doing wrong? Any help will be appreciated. My App.js file is like:

`

import "./App.css";
import title from "./data/breaking.json";

export default function App() {
    const { data } = title
    return (
    <div className="App">
      {data}
    </div>
  );
}

`

My JSON file is like "./data/breaking.json":

`

{
    "pubDate":{
        "5":"31-10-2022 06:26:18 UTC",
        "1":"31-10-2022 06:26:09 UTC",
        "4":"31-10-2022 06:24:07 UTC",
        "3":"31-10-2022 06:22:43 UTC",
        "8":"31-10-2022 06:21:59 UTC",
        "2":"31-10-2022 11:51:04 ",
        "7":"31-10-2022 06:20:48 UTC",
        "0":"31-10-2022 02:20:33 ",
        "9":"31-10-2022 06:20:17 UTC",
        "10":"31-10-2022 06:18:00 UTC"
    },
    "timestamp":{
        "5":1667197578.0,
        "1":1667197569.0,
        "4":1667197447.0,
        "3":1667197363.0,
        "8":1667197319.0,
        "2":1667197264.0,
        "7":1667197248.0,
        "0":1667197233.0,
        "9":1667197217.0,
        "10":1667197080.0
    }

`

I tried several solutions but none worked. I tried reformatting the JSON file, but that will be costly since the cron is already live. The JSON file gets periodically updated. So I was expecting it to render in real time on the browser.

@jayarjo I know I know. But that should not hamper the rendering. There are a few answers that fixed it even without the data tag. However, adding more data to fix parsing is not a valid solution imho. What if my API sends data in this format and there's nothing I can do about it because some engineer pushed the changes years ago and changing that will break 100 different cron jobs running simultaneously? — Sreetam Ganguly
– Sreetam Ganguly, Commented Oct 31, 2022 at 19:15
If you don't have it, const { data } = title will produce - undefined. And nothing will be rendered. If you know this, edit your question - otherwise it's not clear what you are asking. — jayarjo
– jayarjo, Commented Nov 1, 2022 at 11:19

abious · Accepted Answer · 2022-10-31 07:16:22Z

1

Destructure your title object properly. There is no data property in your imported object.

You can see the following:

import React from 'react';
import './style.css';
import data from '../data/breaking.json';

export default function App() {
  const { pubDate, timestamp } = data;

  console.log(pubDate, timestamp);

  return (
    <div>
      <h1>{ pubDate[0] }</h1>
      <h1>{ timestamp[0] }</h1>
    </div>
  );
}

https://stackblitz.com/edit/react-7zbxx7?embed=1&file=src/App.js

edited Oct 31, 2022 at 7:16

answered Oct 31, 2022 at 7:13

abious

112 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Nensi Kardani · Accepted Answer · 2022-10-31 07:08:35Z

0

You can get JSON data like the below:

const  data  = title
console.log("data==>",data.pubDate)
console.log("data==>",data.timestamp)

Where title is the JSON file imported name and it will be initialized to data and from data you can get pubDate and timestamp.

answered Oct 31, 2022 at 7:08

Nensi Kardani

2,4207 gold badges25 silver badges41 bronze badges

Comments

Ahmad · Accepted Answer · 2022-10-31 07:26:08Z

0

use require to import JSON file, like

const title = require("./data/breaking.json");

Object.values

import "./App.css";
const title = require("./data/breaking.json");

export default function App() {
  const { pubDate, timestamp } = title;

  return (
    <div className="App">
      {Object.values(pubDate).map((val) => (
        <p>{val}</p>
      ))}
    </div>
  );
}

answered Oct 31, 2022 at 7:26

Ahmad

1,5191 gold badge6 silver badges12 bronze badges

Collectives™ on Stack Overflow

Cannot display JSON objects in React

3 Answers 3

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related