0

I'm working with react, and I have a structured JSON of the following form:

"results": [
    {
        "url": "http://localhost:8000/api/dashboard/4/",
        "pk": 4,
        "field": [
            {
                "url": "http://localhost:8000/api/fields/3/",
                "pk": 3,
                "field": “favourite field”,
                "aoc": "favourite aoc”,
                "guide": {
                    "article": {
                        "starter": [
                            {
                                "title": "favourite title”,
                                "description": "favourite description”,
                                "link": “http://www.favourite-link.com”
                            }
                        ],
                        “intermediate”: [
                            {
                                "title": "favourite title”,
                                "description": "favourite description”,
                                "link": “http://www.favourite-link.com”
                            }
                        ],
                        “advanced”: [
                            {
                                "title": "favourite title”,
                                "description": "favourite description”,
                                "link": “http://www.favourite-link.com”
                            }
                        ]
                    },
                    “pdf”: {
                        "starter": [
                            {
                                "title": "favourite title”,
                                "description": "favourite description”,
                                "link": “http://www.favourite-link.com”
                            }
                        ],
                        “intermediate”: [
                            {
                                "title": "favourite title”,
                                "description": "favourite description”,
                                "link": “http://www.favourite-link.com”
                            }
                        ],
                        “advanced”: [
                            {
                                "title": "favourite title”,
                                "description": "favourite description”,
                                "link": “http://www.favourite-link.com”
                            }
                        ]
                    },
                    “klass”: {
                        "starter": [
                            {
                                "title": "favourite title”,
                                "description": "favourite description”,
                                "link": “http://www.favourite-link.com”
                            }
                        ],
                        “intermediate”: [
                            {
                                "title": "favourite title”,
                                "description": "favourite description”,
                                "link": “http://www.favourite-link.com”
                            }
                        ],
                        “advanced”: [
                            {
                                "title": "favourite title”,
                                "description": "favourite description”,
                                "link": “http://www.favourite-link.com”
                            }
                        ]
                    },
                    “video”: {
                        "starter": [
                            {
                                "title": "favourite title”,
                                "description": "favourite description”,
                                "link": “http://www.favourite-link.com”
                            }
                        ],
                        “intermediate”: [
                            {
                                "title": "favourite title”,
                                "description": "favourite description”,
                                "link": “http://www.favourite-link.com”
                            }
                        ],
                        “advanced”: [
                            {
                                "title": "favourite title”,
                                "description": "favourite description”,
                                "link": “http://www.favourite-link.com”
                            }
                        ]
                    },
                    “question: {
                        "starter": [
                            {
                                "title": "favourite title”,
                                "description": "favourite description”,
                                "link": “http://www.favourite-link.com”
                            }
                        ],
                        “intermediate”: [
                            {
                                "title": "favourite title”,
                                "description": "favourite description”,
                                "link": “http://www.favourite-link.com”
                            }
                        ],
                        “advanced”: [
                            {
                                "title": "favourite title”,
                                "description": "favourite description”,
                                "link": “http://www.favourite-link.com”
                            }
                        ]
                    }
                }
            }
        ],
        “publications”: [
            …
        ]
    },
]

My main focus is how to traverse inner list type corresponding to a key, below is what I’ve tried so far with my rendered component- however I got TypeError: Cannot read properties of null (reading 'starter’)..

<div>
    {results.field.map(field => {
        return (
            {field.guide.article.starter.map(obj => {
                return (
                    <p>{obj.title}</p>
                );
            })}
        );
    })}
</div>

My question is, how best are JSON traversals approached to achieve inner list iterations- like in this instance I'd like to reach starter intermediate and advanced objects for all keys in guide object.

23rdpro
  • 81
  • 1
  • 10
  • 2
    [You don't traverse JSON, you parse it and traverse the resulting data.](https://stackoverflow.com/q/2904131/1218980) – Emile Bergeron Dec 16 '21 at 19:43
  • 1
    "How best are JSON traversals approached to achieve inner list iterations" is too broad a question. If you're getting an error and would like us to help with that, you should start with a runnable [minimal reproducible example] (https://stackoverflow.com/help/minimal-reproducible-example). – Ruan Mendes Dec 16 '21 at 19:51
  • it looks like `results` could be an array of objects, so first, you need to iterate through `results` to get to`field`. – devSwap Dec 16 '21 at 19:51
  • 1
    solved it [this](https://www.pluralsight.com/guides/convert-a-json-file-to-an-array-in-react) helped- thank you @EmileBergeron – 23rdpro Dec 16 '21 at 19:58

0 Answers0