Browse Objects from Objects

Asked

Viewed 538 times

1

How to Browse JS Objects?

Like, I got a Json

{
  children":[
    {}
  ]
}

the question is, that sometimes there are objects inside objects and sometimes not, inside that Children, I can have another Children, and so on.

javascript json objects

  • You can explain what you intend to do? children is an array, do you want to access one by one, change something, replace it?? Give an example to make the question clearer.

  • I want to ride a tree,

  • Example: Folder Subfolder Subfolder Subfolder & #Xa; Folder 2 Subfolder ?

  • I do not understand. Try to explain better with a practical case. The subject is not complex but difficult to know what you are looking for just like this.

  • Like a treegrid, I want to basically display a treegrid, as my json returns, but when it comes to return only one, that’s fine, but I don’t know how to return, this to make a treegrid

  • What do you want to show in a JSON format? A board structure? company data? Or do you want to show/access a JSON you already have? in this case gives an example of the structure and says what you need to extract from it.

  • I already have a JSON, and I want to build a structure of folders and subfolders (and subfolders), as JSON returns. Type a "tree"

  • Rafael, can you give an example of the JSON you have? These folders will be where? on the/Node.js server or you want to mount HTML with your JSON structure. Explain your doubt further... otherwise we can’t help, even though we certainly know the answer to your problem.

  • https://jsbin.com/suqiwesato/edit?html,js,output

  • On the link above is an example of my JSON. I want to list them on screen. childens, are subfolders

  • Great, we already have something concrete. And what do you want to do with JSON? create HTML? use with an API? or how you will use JSON?

  • I want to render on screen, show in HTML

  • Okay! We’re close. What part of JSON do you want to show? you can give an example of what HTML should look like with the data (although you don’t know how to put it there).

  • I just want to display the name, managing to display in file I mount an HTML, can be in list or any other way. I want to display the name of the folder that is in the json NAME, and the name of the subfolders that is in childens also in NAME

Show 9 more comments

1 answer

2


Here is a suggestion:

function criarSubPasta(obj, parent) {
  // criar <li>nome</li>
  var nameLi = document.createElement('li'); 
  nameLi.innerHTML = obj.name;
  parent.appendChild(nameLi);

  // parar aqui se não houver children
  if (!obj.children) return;

  // preparar um novo <ul></ul> para as subpastas
  var childrenLi = document.createElement('li');
  var ul = document.createElement('ul');
  parent.appendChild(childrenLi);
  childrenLi.appendChild(ul);
  obj.children.forEach(function(child) {
    // correr a mesma lógica recursivamente nas subpastas
    criarSubPasta(child, ul);
  });
}

criarSubPasta(json, document.querySelector('ul'));

Example:

var json = [{
  "id": "152",
  "repository": "1",
  "name": "Repositório",
  "created_by": {
    "id": "14",
    "name": "",
    "username": ""
  },
  "created_at": "",
  "last_updated_by": {
    "id": "6",
    "name": "",
    "username": ""
  },
  "last_updated_at": "",
  "children": [{
      "id": "688",
      "repository": "1",
      "parent": "152",
      "name": "Licitações",
      "created_by": "6",
      "created_at": "2147483647",
      "last_updated_by": "245",
      "last_updated_at": "2147483647",
      "active": "1",
      "children": [{
          "id": "722",
          "repository": "1",
          "parent": "688",
          "name": "Federais",
          "created_by": "6",
          "created_at": "2147483647",
          "last_updated_by": "7",
          "last_updated_at": "2147483647",
          "active": "1"
        },
        {
          "id": "724",
          "repository": "1",
          "parent": "688",
          "name": "Estaduais",
          "created_by": "6",
          "created_at": "2147483647",
          "last_updated_by": "7",
          "last_updated_at": "2147483647",
          "active": "1"
        },
        {
          "id": "740",
          "repository": "1",
          "parent": "688",
          "name": "Municipais",
          "created_by": "245",
          "created_at": "2147483647",
          "last_updated_by": "7",
          "last_updated_at": "2147483647",
          "active": "1",
          "children": [{
            "id": "778",
            "repository": "1",
            "parent": "740",
            "name": "2017",
            "created_by": "7",
            "created_at": "1484311566",
            "last_updated_by": "7",
            "last_updated_at": "1484311566",
            "active": "1"
          }]
        }
      ]
    },
    {
      "id": "689",
      "repository": "1",
      "parent": "152",
      "name": "Dossiê Funcional",
      "created_by": "6",
      "created_at": "2147483647",
      "last_updated_by": "6",
      "last_updated_at": "2147483647",
      "active": "1",
      "children": [{
          "id": "704",
          "repository": "1",
          "parent": "689",
          "name": "Matriz",
          "created_by": "6",
          "created_at": "2147483647",
          "last_updated_by": "7",
          "last_updated_at": "2147483647",
          "active": "1"
        },
        {
          "id": "718",
          "repository": "1",
          "parent": "689",
          "name": "Filiais",
          "created_by": "236",
          "created_at": "2147483647",
          "last_updated_by": "7",
          "last_updated_at": "2147483647",
          "active": "1"
        }
      ]
    },
    {
      "id": "690",
      "repository": "1",
      "parent": "152",
      "name": "Notas Fiscais",
      "created_by": "6",
      "created_at": "2147483647",
      "last_updated_by": "6",
      "last_updated_at": "2147483647",
      "active": "1",
      "children": [{
          "id": "697",
          "repository": "1",
          "parent": "690",
          "name": "Serviço",
          "created_by": "6",
          "created_at": "2147483647",
          "last_updated_by": "6",
          "last_updated_at": "2147483647",
          "active": "1"
        },
        {
          "id": "698",
          "repository": "1",
          "parent": "690",
          "name": "Material",
          "created_by": "6",
          "created_at": "2147483647",
          "last_updated_by": "6",
          "last_updated_at": "2147483647",
          "active": "1"
        },
        {
          "id": "699",
          "repository": "1",
          "parent": "690",
          "name": "Despesas",
          "created_by": "6",
          "created_at": "2147483647",
          "last_updated_by": "6",
          "last_updated_at": "2147483647",
          "active": "1"
        }
      ]
    }
  ]
}];

function criarSubPasta(obj, parent) {
  var nameLi = document.createElement('li');
  nameLi.innerHTML = obj.name;
  parent.appendChild(nameLi);
  if (!obj.children) return;
  var childrenLi = document.createElement('li');
  var ul = document.createElement('ul');
  parent.appendChild(childrenLi);
  childrenLi.appendChild(ul);
  obj.children.forEach(function(child) {
    criarSubPasta(child, ul);
  });
}
json.forEach(function(obj) {
  var ul = document.createElement('ul');
  document.body.appendChild(ul);
  criarSubPasta(obj, ul);
});

  • if my json returns more folders inside folder, it works too?

  • @Rafaelaugusto yes, provided that each object has a property children array. No matter the depth.

  • it has yes, I’m sorry, but my json returns [] at the beginning, ai error, if I shoot works, how to do?

  • @Rafaelaugusto you can explain better "my json returns [] at the beginning"? You mean you get json twice? one empty and the other full?

  • no, it comes like this at the beginning [ "id":"152", "Repository":"1", "name":"Reposit u00f3rio", "created_by"; }.....

  • @Rafaelaugusto ah, ok. And there’s only one entry? or several?

  • only this at the beginning and one closing at the end

  • Of course, various results inside, but the results are as I sent you up

  • @Rafaelaugusto pity you did not give the correct JSON at the beginning. But corrected now, it only needs one forEach basically.

  • Sorry, I didn’t think it would make a difference

  • @Rafaelaugusto is no problem. Learn more about how the site works :) If the answer solved your problem you can click to mark as accepted.

  • I couldn’t implement, where I would use the foreach?

  • @Rafaelaugusto sees in the reply, I updated the example, at the end of the executable part. You find?

  • Ata, sorry, it worked, Thanks :D

Show 9 more comments

Browser other questions tagged javascript json objects

You are not signed in. Login or sign up in order to post.