React - Render complex json data

Question

I just started out with React and I have a use case where I need to display form data that is already fetched from an API. The form data is pretty complex and I am also having a tough time using JSX. The data can be found here - https://stackblitz.com/edit/react-nhjmzv

The idea is to display the data in two sections, each section with the title and below the title, display the form labels and their corresponding values. Kind of like a read only view of the form. The data is completely dynamic so might grow in the number of key-value pairs.

Any help or direction to go in is appreciated. I tried for in loop to iterate but somehow React doesn't like it and learnt a bit about that as well. I am also going through other SO questions as I post this. Thanks in advance.

Edit - I have access to lodash if that helps Edit 2 - Changed stackblitz link to the edit version

Link to edit/view: https://stackblitz.com/edit/react-nhjmzv – Tamilvanan Sep 26 '18 at 06:49 — Tamilvanan, Sep 26 '18 at 06:49

lluca · Answer 1 · 2018-09-30T12:33:53.750

0

#New answer

This should help you. Beware that I'm learning React too. https://stackblitz.com/edit/react-ytp2wh

#Previous answer

You can fetch data with fetch() method.

MDN docs:

A basic fetch request is really simple to set up. Have a look at the following code:

fetch('http://example.com/movies.json')
  .then(function(response) {
    return response.json();
  })
  .then(function(myJson) {
    console.log(JSON.stringify(myJson));
  });

Here we are fetching a JSON file across the network and print it to the console.

Then, instead of using for-loop, try map() to display data in JSX.

Sample:

 render() {
    return (  
      <div>
        { 
          movies.map((movie) => (          
            <div 
                key={movie.id} 
                title={movie.title} 
                description={movie.description}
                preview={movie.preview}
            />                      
          ))                    
        }  
      </div>
    )
  }

See also Loop inside react JSX

edited Sep 30 '18 at 12:33

answered Sep 26 '18 at 07:14

lluca

181
2
15

I'm sorry if I wasn't clear with the question. I am not looking at making the API call. I already have the data after the API call. It is the json object rendering I am having a problem with. And the data is complex json which needs to be traversed. – Vishwas Sep 26 '18 at 07:32
You should add the structure of the JSON to your question (make it as short as possible) and also what you actually want to do with it. – Timo Sep 26 '18 at 08:10
I have posted a stackblitz link that contains the data – Vishwas Sep 26 '18 at 08:15
By my opinion, you should post on codereview instead, https://codereview.stackexchange.com/ – lluca Sep 26 '18 at 15:02
I edited the answer with the code snippet you needed – lluca Sep 30 '18 at 12:37

score 0 · Answer 2 · answered Sep 26 '18 at 08:19

0

Here is a rough solution of what you're trying to achieve: React JSON Form

answered Sep 26 '18 at 08:19

Dave Kalu

1,520
3
19
38

React - Render complex json data

2 Answers2