How do to make the simplest code for dynamic data?

Hello world!

I have a JSON file with more than 200 records.

I want that each record to be active button with unique actions.

The code is the following:

$.getJSON ("content.json",

{function (Data)}

for (var i = 0; i < 200; i ++) {}

var s = sym.getSymbol("base").createChildSymbol ("template", "CONT");

s.getSymbolElement ();

s.Element.attr ('id', 'symbol' + i);

s. $("imageholder") .css ({'background-image': "url ('" + data [i].) "}) (image_+_«_'_»)});

s. $("imageholder") .data ('myIndex', i);

s.$("imageHolder"). Data('title',Data[i].) (Name)

s.. Click$ ("imageholder") ("click", Function {}

If ($(this) .data ("myIndex") == 0) {}

WB = 10;

SYM.$("#symbol0"). Show();

SYM.$("#Symbol1"). Hide();

SYM.$("#Symbol2"). Hide();

SYM.$("#symbol3"). Hide();

sym.getComposition () .getStage ().getSymbol('placer').$("holder").css ({'background-image': "url (" + $(this).data('Large') + ")"});

sym.getComposition () .getStage ().getSymbol('placer').$("holdertxt").html ($(this) .data ('the kid'));

If (WB == 10) {}

sym.getSymbol("#symbol0").$("rect").animate ({opacity:1}, 700);

};

}

ElseIf ($(this) .data ("myIndex") == 1) {}

WB = 11;

SYM.$("#symbol0"). Hide();

SYM.$("#Symbol1"). Show();

sym.getComposition () .getStage ().getSymbol('placer').$("holder").css ({'background-image': "url (" + $(this).data('Large') + ")"});

sym.getComposition () .getStage ().getSymbol('placer').$("holdertxt").html ($(this) .data ('the kid'));

If (WB == 11) {}

sym.getSymbol("#symbol1").$("rect").animate ({opacity:1}, 700);

};

}

});

s. $("imageholder") .mouseout ("mouseout/mouseouthandler()", function (e) {}

If ($(this) .data ("myindex") == 0 & & WB! = 10) {}

sym.getSymbol("#symbol0").playReverse ("selectend");

}

ElseIf ($(this) .data ("myindex") == 1 & & WB! = 11) {}

sym.getSymbol("#symbol1").playReverse ("selectend");

}

});

s. $("imageholder") .mouseout ("mouseout/mouseouthandler()", function (e) {}

If ($(this) .data ("myindex") == 0 & & WB! = 10) {}

sym.getSymbol("#symbol0").play ("selectstart");

}

ElseIf ($(this) .data ("myindex") == 1 & & WB! = 11) {}

sym.getSymbol("#symbol1").play ("selectstart");

}

});

}

});

How is possible to place an each command or something else for not writing for each Index and for each function actions?

Now I'm writing for each function (passing of the mouse, click, mouseout/mouseouthandler()) the actions that each record in the JSON must do.

Can someone help me?

Based on your code above, I made the following assumptions:

You have shown the code for two values of i (0 and 1) and want a similar code for the rest
Two managers mouseout/mouseouthandler() in the code above is a typo, one of them is supposed to be a mouseover (according to the description at the bottom). In the solution, I will propose, I guess that one was supposed to be a manager of mouseover
BM is a global variable and values range from 10, 11, 12... 10 + n - 1. Please check the code once though, I think that there is a logical problem with the closure, you create around WB in mouseout/mouseouthandler() handlers. I can't identify the intention if the proposed solution will be based on your code above.

Another bug in the code is in the way you join managers:

s.. Click$ ("imageholder") ("click", Function {}) must be changed to: s.$("imageholder"). on ("click", Function {})

and still other managers.

You can use the following to simplify your code:

$.getJSON("content.json", function (data) {
     for (var i = 0; i < data.length; i++) {
          var s = sym.getSymbol("base").createChildSymbol("template", "conts");
          var e = s.getSymbolElement(); 
          e.attr('id', 'symbol' + i); 
          s.$("imageholder").css({ "background-image": "url('" + data[i].image + "')" });
          s.$("imageholder").data('myIndex', i);
          s.$("imageholder").data('title', data[i].name); 

          s.$("imageholder").on("click", function (e) {
               WB = 10 + i;
               sym.$("#symbol0").show();
               sym.$("#symbol1").hide();
               sym.$("#symbol2").hide();
               sym.$("#symbol3").hide();
               sym.getComposition().getStage().getSymbol('placer').$("holder").css({ "background-image": " url(" + $(this).data('Large') + ")" });
               sym.getComposition().getStage().getSymbol('placer').$("holdertxt").html($(this).data('title'));
               sym.getSymbol("#symbol0").$("rect").animate({ opacity: 1 }, 700);
          });

          s.$("imageholder").on("mouseover", function (e) {
               //Looks like a logical bug, please double check.. I don't know how you are controlling WB from outside
                if(WB != 10 + i) {
                    sym.getSymbol("#symbol0").playReverse("selectend");
                }
         }); 

          s.$("imageholder").on("mouseout", function (e) {
               //Looks like a logical bug, please double check.. I don't know how you are controlling WB from outside
               if (WB != 10 + i) {
                    sym.getSymbol("#symbol0").play("selectstart");
               }
          });
     }
});

Another option would be to set up your event handlers in the symbol definition. The advantage is that all instances would automatically inherit the behavior. You just need to understand how to set the code. For example, in your case, you can attach the following click on Manager in the symbol itself imageholder element:

var i = sym.$("imageholder").data('myIndex');  //You will be setting the data on the instance while creating the instance. Rest of the code can use this as a param
WB = 10 + i; //Assuming WB to be available, change the logic accordingly
sym.$("#symbol0").show();
sym.$("#symbol1").hide();
sym.$("#symbol2").hide();
sym.$("#symbol3").hide();
sym.getComposition().getStage().getSymbol('placer').$("holder").css({ "background-image": " url(" + $(this).data('Large') + ")" });
sym.getComposition().getStage().getSymbol('placer').$("holdertxt").html($(this).data('title'));
sym.getSymbol("#symbol0").$("rect").animate({ opacity: 1 }, 700);

The code does not work as it is, but I hope it helps you move forward and you are able to achieve what you wanted. Let us know if you encounter other problems.

DIA-

Tags: Edge Animate

How do to make the simplest code for dynamic data?

Similar Questions

Maybe you are looking for