Parsing Nested JSON and Display it in a Specific Format

Question

I am writing a commenting system. For a particular page, I am fetching the the comments as highly nested JSONs (a comment contains its children, that in turn may contain other children). I want to parse and display these comments in a threaded manner. Here's an example of one such JSON:

{
  "children": [
    {
      "children": [
        {
          "children": [],
          "content": "Here is a child8",
          "id": "child8",
          "pageURIHash": "3988665684",
          "parentId": null
        }
      ],
      "content": "Here is child1",
      "id": "child1",
      "pageURIHash": "3988665684",
      "parentId": null
    },
    {
      "children": [
        {
          "children": [],
          "content": "Here is child3",
          "id": "child3",
          "pageURIHash": "3988665684",
          "parentId": null
        },
        {
          "children": [],
          "content": "Here is child4",
          "id": "child4",
          "pageURIHash": "3988665684",
          "parentId": null
        },
        {
          "children": [],
          "content": "Here is a child5",
          "id": "child5",
          "pageURIHash": "3988665684",
          "parentId": null
        },
        {
          "children": [
            {
              "children": [
                {
                  "children": [],
                  "content": "Here is a child9",
                  "id": "child9",
                  "pageURIHash": "3988665684",
                  "parentId": null
                },
                {
                  "children": [],
                  "content": "Here is a child10",
                  "id": "child10",
                  "pageURIHash": "3988665684",
                  "parentId": null
                }
              ],
              "content": "Here is a child7",
              "id": "child7",
              "pageURIHash": "3988665684",
              "parentId": null
            }
          ],
          "content": "Here is a child6",
          "id": "child6",
          "pageURIHash": "3988665684",
          "parentId": null
        }
      ],
      "content": "Here is child2",
      "id": "child2",
      "pageURIHash": "3988665684",
      "parentId": null
    }
  ],
  "content": "Here is a parent comment",
  "id": "parent",
  "pageURIHash": "3988665684",
  "parentId": null
}

Edit: Ignore the null parentIds. This is just a mock document. Each child comment will have a corresponding parentId, except for the top-level comment

What would be the strategy to solve this problem? I can parse the JSON but how would I display the comments in a threaded fashion? Sorry if this question appears naive but I haven't worked on the front-end much.

Thanks a lot!

Edit: I am using JQuery and Bootstrap. Here's an example of how I want the formatting to be:

https://www.reddit.com/r/AskReddit/comments/a9jcxo/what_are_some_nonobvious_early_signs_that_a/

Edit: Looks like I found a solution. I am using jsTree and it seems to work fine for my use-case.

Which part(key) is comment here ? What is your desired output format ? Will array of comments work for you ? — Sumer
– Sumer, Commented Dec 26, 2018 at 15:43
id: parent is the root comment. It has two children: child1 and child2. The output formatting that I want is like: reddit.com/r/AskReddit/comments/a9jcxo/… I need to show the relationship b/w parent and children comments in the UI, just like Reddit. — Prashant Pandey
– Prashant Pandey, Commented Dec 26, 2018 at 15:51

amritashan · Accepted Answer · 2018-12-26 16:20:43Z

1

~~Your question is a bit vague. Can you provide a sample of what you expect the output to be from the document you have shown in the question?~~

Edit: From what I could understand, this document is the data structure that you use to store the "comments" on a webpage. The content in the document is the comment and you wish to show these in a tree like structure.

I would try recursion to flatten out the data with information like which level it is in and then use that to show the comments on the page.

eg.

let flattenedData = []; 

function flattenify(doc, level) {
  if (!level) {
    level = 0;
  }
  if (!doc || !doc.children || doc.children.length === 0) {
    return;
  }

  for (let index = 0; index < doc.children.length; index++) {
    let node = doc.children[index];
    flattenedData.push({
      content: node.content,
      id: node.id,
      pageURIHash: node.pageURIHash,
      parentId: node.parentId,
      level: level,
    });

    flattenify(node, (level + 1));
  }
}

flattenify(commentDoc); // the document that contains the json structure

console.log(flattenedData);

I have not run this code, so I do not guarantee that this will run successfully on your document. But, this should give you an idea about how to walk over it. Use the level information to push spaces for indentations before the comment.

edited Dec 26, 2018 at 16:20

answered Dec 26, 2018 at 15:17

amritashan

5834 silver badges21 bronze badges

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

2 Comments

Prashant Pandey Over a year ago

Take Reddit for example. When we load a Reddit page, it loads all the comments and displays them as threaded comments, right? The exact same way. For example: reddit.com/r/Sneakers/comments/8bbc45/alphabounce_or_ultraboost

Prashant Pandey Over a year ago

Here's another example containing nested comments: reddit.com/r/AskReddit/comments/a9jcxo/…

aaruja · Accepted Answer · 2018-12-27 06:00:49Z

0

provide the frontend technology you are using. Is it angular, react, jQuery or something else? You might also want to specify more context if you need a more targeted answer.

EDIT

Since you are using JQuery, you could possibly use accordions and modify it to show the threads within each comment. Refer Accordion in the JQuery documentation.

edited Dec 27, 2018 at 6:00

answered Dec 26, 2018 at 15:39

aaruja

3913 silver badges13 bronze badges

4 Comments

Prashant Pandey Over a year ago

I am using Bootstrap and JQuery.

Prashant Pandey Over a year ago

Here is an example of how I want the formatting to be: reddit.com/r/AskReddit/comments/a9jcxo/…

Ruan Mendes Over a year ago

This is not an answer and the question is framework agnostic

aaruja Over a year ago

I couldn't post a comment, hence the answer with a question.

Collectives™ on Stack Overflow

Parsing Nested JSON and Display it in a Specific Format

2 Answers 2

2 Comments

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related