how to dynamically parse Json data using reactjs

Question

I have a requirement to determine a generic standard approach to read the JSON data ( should be able to read any JSON structure) and display in reactjs page. I know that if we know JSON structure, we can traverse through it and display the data in the page accordingly. But here JSON structure should be dynamically determined via code and we should not code specifically for each JSON structure.

For example, I have given Sample1.json and Sample2.json files below. My program should be able to parse Sample1.json if I use it and display them on the page. If I use Sample2.json, still it should be able to parse them and display the data dynamically. We should not have code specifically like archive_header.tracking_id or stock_ledger_sales_key.version_number...etc.

Can someone please let me know how to handle this scenario?

Sample1.json

{
  "archive_header": {
    "tracking_id": "914553536-FRM01-20163609140455-000000001",
    "archived_timestamp": "2018-05-08T09:14:04.055-05:00"
  },
  "journal_record_key": {
    "location_number": "389234",
    "dept_number": "28822"
  },
  "journal_record_detail": {
    "financial_from_item_number": "771",
    "financial_to_item_number": "771"
  }
}

Sample2.json

{
  "stock_ledger_sales_key": {
    "version_number": "12",
    "account_month_number": "01",
    "account_year_number": "2016"
  },
  "stock_ledger_sales_detail": {
    "mature_increase_mtd_percentage": "1.2",
    "mature_increase_stdt_percentage": "2.3",
    "mature_increase_ytd_percentage": "2"
  }
}

i want to display all the information from json. For example if i use sample1.json, I would display tracking_id = 914553536-FRM01-20163609140455-000000001, location_number = 389234, dept_number: 28822, financial_from_item_number = 771 , financial_to_item_number = 771 — prathap K
– prathap K, Commented Jan 2, 2019 at 14:07

codebreach · Accepted Answer · 2019-01-02 14:30:08Z

1

You can just iterate over the keys recursively:

function recursively_iterate(object, parent_name="") {
  output = ""
  for (key in Object.keys(object)) {
    if (typeof object[key] == "object") {
      output = output + recursively_iterate(object[key], key)
    }
    output = output + parent_name + "." + key + ": " + object[key] + "\n"
  }
  return output
}

answered Jan 2, 2019 at 14:30

codebreach

2,25018 silver badges30 bronze badges

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

Comments

Arun AK · Accepted Answer · 2019-01-02 14:31:10Z

0

To display the information as you said, we can do something like this:

const jsonDOM = json => {
  return Object.keys(json).map(key => {
    return Object.keys(json[key]).map(child => {
      return (<div>
        <p>{child}</p>
        <p>{json[key][child]}</p>
        </div>
      );
    });
  });
};

return (<div>
  <h2>JSON 1</h2>
  {jsonDOM(json1)} 
  <h2>JSON 2</h2>
  {jsonDOM(json2)} 
  </div>
);

Here is the live demo

Hope it helps :)

answered Jan 2, 2019 at 14:31

Arun AK

4,3902 gold badges26 silver badges48 bronze badges

2 Comments

prathap K Over a year ago

Thinker, Really Awesome!!! This really works well. Thank you for the quick response...

Arun AK Over a year ago

Glad I helped :)

Gabriel Bleu · Accepted Answer · 2019-01-02 15:10:41Z

You can use JSON.stringify and <pre> tag to output any json you like.

const sample1 = {
  archive_header: {
    tracking_id: "914553536-FRM01-20163609140455-000000001",
    archived_timestamp: "2018-05-08T09:14:04.055-05:00"
  },
  journal_record_key: {
    location_number: "389234",
    dept_number: "28822"
  },
  journal_record_detail: {
    financial_from_item_number: "771",
    financial_to_item_number: "771"
  }
};

const sample2 = {
  stock_ledger_sales_key: {
    version_number: "12",
    account_month_number: "01",
    account_year_number: "2016"
  },
  stock_ledger_sales_detail: {
    mature_increase_mtd_percentage: "1.2",
    mature_increase_stdt_percentage: "2.3",
    mature_increase_ytd_percentage: "2"
  }
};

class App extends React.Component {
  render() {
    return (
      <div>
        <h3>sample1</h3>
        <pre>
          <code>{JSON.stringify(sample1, null, 2)}</code>
        </pre>
        <h3>sample2</h3>
        <pre>
          <code>{JSON.stringify(sample2, null, 2)}</code>
        </pre>
      </div>
    );
  }
}

ReactDOM.render(<App />, document.getElementById("root"));

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>

<div id="root"></div>

Collectives™ on Stack Overflow

how to dynamically parse Json data using reactjs

3 Answers 3

Comments

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related