React Get Json

Posted on  by admin

Update App Component

Modified1 year, 7 months ago. I am new to react and trying to implement all the key and values of a JSON object in my web page. I have a below JSON structure. I want all the keys and values to be printed in my web page where key should be printed as labels. I have written the below code to get the keys and values of this JSON. props.myArr has the entire object. I am able to print the keys and values but not the nested object under key4(p1,p2,p3).

I want all the keys along with its values to be printed one after another in my web page. Can someone tell me where am i going wrong and how to access all the keys (as labels) and values of the JSON object.

Setting Up a Local JSON file

P.S I am using getValues with map function to retrieve first level of key and values as the provided syntax by you under generateElement() gives me error. What you need here is recursion. Though, there is something missing in your design, you are not defining the exact condition for when should the program actually extract the value. For example, lets define that if a value of a given keyis a string, then we will render it to the page.

Such condition will look something like this: . Then with this decision, you can write a function that will take a data object and recursively will go over the object's keys, based on the condition above, it will return the valueOr another call to the same function with the value as the new data object.


The function will look something along this block of code:. I'm using .reduce here to build a new array.

and as mentioned above, i will push to the new array either the key or the result of a recursive call to the function with the value as the new data object, of course based on the condition mentioned above.Note, that the recursive call will return an array, so i'm using the spread syntax to extract it's members.

React array of object example

Now, we want our key and value to get rendered to the DOM.So instead to just push the key or value, we can push an element.

How to read the external file using fetch.

Here is a full running example:. 88 gold badges5959 silver badges9191 bronze badges. 9191 bronze badges. When building applications in React, we often need to work with JSON data.This data could come from third party APIs or be read from external files.In this guide, we will work on a code example to load the JSON data from a file and renderit inside a React component. Say you have a data set in JSON format containing information onfinancial stocks from multiple companies.

Each stock has metadata associatedwith it. Your goal is to read that data from an external file and render it onthe web page in a tabular format, as shown below. Open your terminal and run these commands to use Create React App to get a sample app running on your machine.

Now, to run the app in the development mode, open http://localhost:3000 in your browser. You should see the sample app running with a React logo.

Create Stocks Component

Create a file in your project at location src/data.js and add the data below in your data.js file. stockData is a JSON array containing dummy stock prices of some companies. Each JSON object inside this array contains four things:. Using export const allows you to define and initialize variables that can be imported into any React component.

In fact, you'll shortly import stockData as a JavaScript object in the next step.

It's time to update our component because we need to render JSON data into our components.

Build and Deploy this Application

So head to the src/App.js file and remove all the boilerplate code that came with it.

How to display local external json files in react component.

Instead, add this piece of code to the component. Go to the browser and open http://localhost:3000.


You will see errors in the application because the component wraps and returns a component that doesn't exist yet.

Consuming Local JSON Data Using Fetch API

Don't worry—you will add this new component next. You will now add a new component inside the src directory and name it Stocks.js. The location of the component inside your project should be src/Stocks.js. Add the code below to your component file. The code currently doesn't do anything except return a

containing the message Welcome to Stock Tracker, but you will extend this code shortly.