0

I parse XML ( http://gyazo.com/fe38f0eb89a1f1f88927f676f304cc1c ) to JSON with a plugin. I want it to loop through all categories and for each loop cycle repeat the process for child categories and props, it should be doing this infinitely so with a loop.

I have looked into recursive functions and it's what I am attempting but it's not working for me cause the console.log always says that it's undefined as soon as I try $.each to get the child elements.

JQuery

function ParseData(v) {
    var caption = v.caption;
    console.log('Category ' + caption + ' parsed.');

    if (v.prop != undefined) {
        console.log('Prop(s) found, parsing....');
        $.each(v.prop, function(key, value) {
            ParseData(v.prop);
        });
    }
    else if (v.cat != undefined) {
        console.log('Child(s) found, parsing....');
        $.each(v.cat, function(key, value) {
            ParseData(v.cat);
        });
    }
}


function loadProps() {
    //variables
    var pb = $('div#prop_browser');

    //parse prop categories
    console.log('Parsing Categories....');
    $.get("prop-cat.xml", function(xml) {
        var data = $.xml2json(xml);
        $.each(data, function(key, value) {
            $.each(value, function(key, value) {
                ParseData(value);
            });
        });
    });
}

I have literally spent hours and hours of googling and coding but I cannot figure this out and I doubt that it is my logic....

Please help me!

Sample JSON (used JSON.stringify instead of ParseData): First JSON string has two categories, one prop. Second JSON string has one category and one prop.

{"cat":[{"id":"0","caption":"Dog 1","img":""},{"id":"0","caption":"Dog 9","img":""}],"prop":{"caption":"Prop 1","img":""},"id":"0","caption":"Cat 1","img":""}

{"cat":{"id":"0","caption":"Dog 1","img":""},"prop":{"caption":"Prop 2","img":""},"id":"0","caption":"Cat 2","img":""}

@charlietfl's JSFiddle, doesnt work wth is going on!

function processData() {
    $(pb).append('<div class="prop_category">' + $(this).attr('caption'));
    if ($(this).children().length > 0) {
        $(this).children().each(processData);
    } else {
        $(pb).append('</div>');
    }
}

function loadProps() {
    //variables
    pb = $('#prop_browser');

    $.get("prop-cat.xml", function(xml) {
        $(xml).children().each(processData);
    });
}
NullBy7e
  • 526
  • 7
  • 23
  • Could we see a sample JSON string you wish to loop through? Also, your ParseData method doesn't seem to be returning anything. – slider Nov 16 '13 at 19:14
  • Sure thing, added to the bottom of the OP! – NullBy7e Nov 16 '13 at 19:20
  • [Learn how to **debug** JavaScript](http://www.creativebloq.com/javascript/javascript-debugging-beginners-3122820) and set breakpoints in your code. Then you can inspect the variables, see exactly what value they have and make adjustments accordingly. – Felix Kling Nov 16 '13 at 19:21
  • You have to check for children before you try to run `$.each`. I gave you an XML recursive example earlier but you said you resolved your problems – charlietfl Nov 16 '13 at 19:22
  • @Felix is there really such need for this? Is there not an example floating around someone for JSON arrays like mine, i tried searching. – NullBy7e Nov 16 '13 at 19:23
  • @charlietfl you only said that I had to look up recursive functions?... – NullBy7e Nov 16 '13 at 19:24
  • No...I posted a fully working XML demo http://jsfiddle.net/a4CPs/ – charlietfl Nov 16 '13 at 19:25
  • But what do you want to do as you loop through each of them? You just call ParseData but the function doesn't actually do anything. Also, your JSON strings are not uniform. In the first string 'cat' points to an array, and in the second it points to an object. – slider Nov 16 '13 at 19:26
  • @slider for now I just want to console.log the caption of each element. – NullBy7e Nov 16 '13 at 19:27
  • Knowing how to debug your code is an invaluable skill. Don't you want to be able to solve problems like this on your own? Anyways, since everyone structures their data differently, there cannot be an answer/example that fits perfectly to your situation. What you have to learn is how to generally process arrays and objects and build your solution from that. See also [Access / process (nested) objects, arrays or JSON](http://stackoverflow.com/questions/11922383/access-process-nested-objects-arrays-or-json). – Felix Kling Nov 16 '13 at 19:27
  • Also FYI, this question has nothing to do with JSON. I assume that `$.xml2json` actually returns an array or object, not JSON. – Felix Kling Nov 16 '13 at 19:28
  • @charlietfl I'll try out your fiddle. – NullBy7e Nov 16 '13 at 19:30
  • @charlietfl actually I spent 40min with your fiddle but it wouldnt properly put children into the parent's divs...I am DONE! Been at this all day long, please just make a working example for me for divs or something..apparantly the same code works lists but not div. – NullBy7e Nov 16 '13 at 20:10
  • post your xml in script tag of demo and save again, along with example of html structure wanted – charlietfl Nov 16 '13 at 20:11
  • your problem is not following concept where my demo builds html by string, and adds all html at once, you are trying to append each loop which isn't nearly as efficient with a lot of nesting – charlietfl Nov 16 '13 at 20:14
  • @charlietfl Sorry I am just so tired and been at this for hours. I made a fiddle: http://jsfiddle.net/6BZ8J/1/ – NullBy7e Nov 16 '13 at 20:25

0 Answers0