0

I have an unordened list where each list item is given a data id, I need this ID value to update the view later, basically I cant remove the values from the json, is there a way to hide the value from the html without removing it from the json data? and console.log with a click? The objects are: "level_0_id": 1, "level_1_id": 1, "level_2_id": 1, "id": 1

Here is the code from the fiddle: https://jsfiddle.net/creativestudio/m4t8tszk/1/

Here's the Js:

function list(object) {
        var json="<ul class='dropdown'>";
        for(prop in object){
            var value = object[prop];
            switch (typeof(value)){
                case "object":
                        var token = Math.random().toString(36).substr(2,16);

                        json += "<li><div id='"+ token +"' class='collapse'>"+list(value)+"</div></li>";
                        break;
                        default:

                        json += "<li>"+value+"</li>";
                    }
                }
                return json+"</ul>";
            }

        $(document).ready(function() {

            console.log(data);
            $('#sidebar').html(list(data));
        });
user1547007
  • 267
  • 1
  • 10
  • 22
  • How will the `li` be selected , clicked if hidden , not displayed ? – guest271314 Mar 14 '15 at 02:42
  • This will be when the user click . – user1547007 Mar 14 '15 at 03:04
  • 1
    See post below. `click` `event` assigned to parent container `#output`. Is expected result the `li` that are `hidden` , `display:none` , be clicked ? – guest271314 Mar 14 '15 at 03:07
  • Basically you click "li" element like {"name": "Jane Doe","id": 789} output ID, if parent like "level_2_id": 2789" output children id's and so on, does't make sense for you? – user1547007 Mar 14 '15 at 03:14
  • Hide `li` having text "3333" , `click` element having text "John Doe", log `3333` at `console` ? – guest271314 Mar 14 '15 at 03:40
  • "li" with ID like "level_0_id": 1, should be hidden, clicking on the previous parent "li"item in this case ""level_0_name": "Americas"," will output hidden children ids and so on. – user1547007 Mar 14 '15 at 03:49

2 Answers2

0

Try

$(document).ready(function() {
    var filter = ["12345", "2451", "3333"];
    var result = $(list(data)).map(function(i, el) {
        var res = $("li", el).filter(function(idx, elem) {
          return $.inArray(elem.textContent, filter) !== -1
        }).fadeTo(0,0, function() {

          var el = this;
          $(":contains(Americas)")
          .on("click", function() {
            console.log(el.textContent)
          })
        })

        return el
    })
    $("#output").html(result);   
});

jsfiddle https://jsfiddle.net/m4t8tszk/4/

guest271314
  • 1
  • 15
  • 104
  • 177
0

JSON is a specific way of organizing information. So calling your html string "json" isn't really accurate. I'd change it to "listView" or something.

You can always use JQuery. Just add a class (like hide) to whatever you want to do stuff to.

$(".hide").click(function(event) { 
  var clickedThing = event.currentTarget // Also could use the keyword "this"
  var clickedThing.hide();
});

I recomend having a hidden and a visible class. If you click one, have JQuery switch it to the other.

MDrewT
  • 66
  • 8