how to dynamically parse Json data using reactjs

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"

  }

}

edited Jan 2 at 14:08

Thinker

2,254625

asked Jan 2 at 14:03

prathap K

114

what information do you want to display from the json?

– Thinker
Jan 2 at 14:06

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
Jan 2 at 14:07

add a comment |

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"

  }

}

edited Jan 2 at 14:08

Thinker

2,254625

asked Jan 2 at 14:03

prathap K

114

what information do you want to display from the json?

– Thinker
Jan 2 at 14:06

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
Jan 2 at 14:07

add a comment |

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"

  }

}

edited Jan 2 at 14:08

Thinker

2,254625

asked Jan 2 at 14:03

prathap K

114

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"

  }

}

{

  "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"

  }

}

{

  "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"

  }

}

{

  "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"

  }

}

{

  "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"

  }

}

reactjs

edited Jan 2 at 14:08

Thinker

2,254625

asked Jan 2 at 14:03

prathap K

114

edited Jan 2 at 14:08

Thinker

2,254625

asked Jan 2 at 14:03

prathap K

114

edited Jan 2 at 14:08

Thinker

2,254625

edited Jan 2 at 14:08

Thinker

2,254625

edited Jan 2 at 14:08

Thinker

2,254625

asked Jan 2 at 14:03

prathap K

114

asked Jan 2 at 14:03

prathap K

114

asked Jan 2 at 14:03

prathap K

114

what information do you want to display from the json?

– Thinker
Jan 2 at 14:06

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
Jan 2 at 14:07

add a comment |

what information do you want to display from the json?

– Thinker
Jan 2 at 14:06

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
Jan 2 at 14:07

what information do you want to display from the json?

– Thinker
Jan 2 at 14:06

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
Jan 2 at 14:07

add a comment |

3 Answers
3

active

oldest

votes

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 at 14:31

Thinker

2,254625

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

– prathap K
Jan 2 at 16:04

Glad I helped :)

– Thinker
Jan 2 at 16:06

add a comment |

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 at 14:30

codebreach

1,3831224

add a comment |

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>

answered Jan 2 at 15:10

Gabriel Bleu

3,9161823

add a comment |

Your Answer

StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");

StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);

StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});

function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});

}
});

draft saved

draft discarded

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f54007723%2fhow-to-dynamically-parse-json-data-using-reactjs%23new-answer', 'question_page');
}
);

Post as a guest

Name

Required, but never shown

3 Answers
3

active

oldest

votes

3 Answers
3

active

oldest

votes

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 at 14:31

Thinker

2,254625

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

– prathap K
Jan 2 at 16:04

Glad I helped :)

– Thinker
Jan 2 at 16:06

add a comment |

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 at 14:31

Thinker

2,254625

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

– prathap K
Jan 2 at 16:04

Glad I helped :)

– Thinker
Jan 2 at 16:06

add a comment |

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 at 14:31

Thinker

2,254625

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 :)

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>

);

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>

);

answered Jan 2 at 14:31

Thinker

2,254625

answered Jan 2 at 14:31

Thinker

2,254625

answered Jan 2 at 14:31

Thinker

2,254625

answered Jan 2 at 14:31

Thinker

2,254625

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

– prathap K
Jan 2 at 16:04

Glad I helped :)

– Thinker
Jan 2 at 16:06

add a comment |

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

– prathap K
Jan 2 at 16:04

Glad I helped :)

– Thinker
Jan 2 at 16:06

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

– prathap K
Jan 2 at 16:04

Glad I helped :)

– Thinker
Jan 2 at 16:06

add a comment |

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 at 14:30

codebreach

1,3831224

add a comment |

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 at 14:30

codebreach

1,3831224

add a comment |

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 at 14:30

codebreach

1,3831224

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 at 14:30

codebreach

1,3831224

answered Jan 2 at 14:30

codebreach

1,3831224

answered Jan 2 at 14:30

codebreach

1,3831224

answered Jan 2 at 14:30

codebreach

1,3831224

add a comment |

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>

answered Jan 2 at 15:10

Gabriel Bleu

3,9161823

add a comment |

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>

answered Jan 2 at 15:10

Gabriel Bleu

3,9161823

add a comment |

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>

answered Jan 2 at 15:10

Gabriel Bleu

3,9161823

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>

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>

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>

answered Jan 2 at 15:10

Gabriel Bleu

3,9161823

answered Jan 2 at 15:10

Gabriel Bleu

3,9161823

answered Jan 2 at 15:10

Gabriel Bleu

3,9161823

answered Jan 2 at 15:10

Gabriel Bleu

3,9161823

add a comment |

draft saved

draft discarded

Thanks for contributing an answer to Stack Overflow!

Please be sure to answer the question. Provide details and share your research!

But avoid …

Asking for help, clarification, or responding to other answers.

Making statements based on opinion; back them up with references or personal experience.

To learn more, see our tips on writing great answers.

draft saved

draft discarded

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Post as a guest

Name

Required, but never shown

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Name

Required, but never shown

Name

Required, but never shown

This page is only for reference, If you need detailed information, please check here

Search This Blog

Ufyukyu