Jquery and json multiple arrays

I have a JSON file with a lot of category names in it. Each category can have subcategories or none. So what I try to do is create an array of category names for each level. When A category hasn't any subcategories then it should show the array from previous level.

2 Examples of outcome:

// Subcategory A has subcategories so it should show them
Example 1: Kitchen -> Subcategory A -> Subsubcategory A1
                      Subcategory B    Subsubcategory A2
                                       Subsubcategory A3 -> etcetc...
                                       Subsubcategory A4

// Subcategory B hasn't any subcategories so it should show the categories from the previous level
Example 2: Kitchen -> Subcategory A
                      Subcategory B -> Subcategory A
                                       Subcategory B

How do you do that? I'm looking for directions/examples...

My JSON looks like this (I cut out all unessecary stuff). Categories can go to 6 levels deep!!

 shop": {
  categories": {
     "1944163": {
        id": "1944163",
       "title": "Kitchen",
        subs": {
           "1944122": {
              id": "1944122",
              "title": "Subcategory A",
               subs": {
                 "1944182": {
                    id": "1944182",
                    "title": "Subsubcategory A1",
                 "1944152": {
                    id": "1944152",
                    "title": "Subsubcategory A2",
                 // etc etc 
           "1944123": {
              id": "1944123",
              "title": "Subcategory B",
              // etc..

When it comes to the Jquery I don't come further then this:

 $.getJSON('url?format=json', function(data){

      $.each(data.shop.categories, function(i, category) {

        var currentCatId = $('.sidebar-left .sidebar-box ul').find('li.active').data('catid');
        if(category.id == currentCatId) {

          if(category.subs) {
            $.each(category.subs, function(i, category) {
              $('.categories-breadcrumbs ul').append('<li>'+category.title+'</li>');
            });



            }
          }

        }  
      });    
    });

Answers


Here's how I might approach it, and it involves a drastic change to the structure of your data. It does, however, greatly simplify it.

In short you have a flat array of objects that contain id, parentId, and label properties. parentId is the important property as it links the objects without having to deep-nest the information.

var cats = [
  { id: 1, parentId: 0, label: 'Kitchen' },
  { id: 2, parentId: 0, label: 'Man Cave' },
  { id: 3, parentId: 1, label: 'Cooker' },
  { id: 4, parentId: 3, label: 'Hob' },
  { id: 5, parentId: 2, label: 'Moose head' },
  { id: 6, parentId: 2, label: 'Cognac' }
];

You can then use the following function to grab the objects for the correct level based on the id:

function getData(arr, id) {
  return arr.filter(function (el) {
    return el.parentId === id;
  });
}

I've mocked a demo to show you how simple it is to use this data


Need Your Help

FB.getLoginStatus callback not fired only on Safari on iOs

javascript facebook-javascript-sdk

I'm trying to check if user is already connected with my FB app after page load event. To achieve that I call FB.getLoginStatus function. It works fine everywhere but Safari under iOS (tested on iP...