0

I am learning programming by doing and just realized I am lacking some fundamentals regarding loops.

Currently, I am creating a Plugin for Sketch (a program for designers). Basically, I have a library of symbols which should be placed on an artboard based on individual rules for each symbol. From an API, I get back where these symbols should be located in a JSON. This is how my JSON is structured:

{
boundingBox =     {
    height = "0.109773919";
    left = "0.0224986672";
    top = "0.005579207";
    width = "0.9701756";
};
probability = "0.9641495";
tagId = "013a0b7b-2b1d-4c18-8de7-fd37c91aa513";
tagName = navtop;
}

What it currently does: It matches the tagNames with my local library of symbols (create symbol). Now I would like to add another function, "positionInArtboard".

var matchSymbol = function(data) {
   for (var i = 0; i < data.predictions.length; i++) {
   var percentage = parseFloat(data.predictions[i].probability);
   if (data.predictions[i].probability > 0.5) {
        createSymbol(data.predictions[i].tagName);
        positionInArtboard(data.predictions[i].tagName);
        }
    }
}

function positionInArtboard (tagName, x, y) {
var tabbars = document.getLayersNamed("tabbar")
var tabbar = tabbars[0];
var tabbarFrame = new sketch.Rectangle(tabbar.frame);
tabbarFrame.x = 0;
tabbarFrame.y = 618;
tabbar.frame = tabbarFrame

var navtops = document.getLayersNamed("navtop")
var navtop = navtops[0];
var navtopFrame = new sketch.Rectangle(navtop.frame);
navtopFrame.x = 0;
navtopFrame.y = 0;
navtop.frame = navtopFrame;
}

The above code works perfectly fine, but in the future I would to have dynamic rules for some of the elements based on the JSON response:

var buttons = document.getLayersNamed("button")
var button = buttons[0];
var buttonFrame = new sketch.Rectangle(button.frame);
navtopFrame.x = data.predictions[i].boundingBox.left * 375;
navtopFrame.y = data.predictions[i].boundingBox.top * 667;
navtop.frame = navtopFrame;

**How could I more elegantly combine the two functions and also pass the data from the JSON response? How can I keep the rules for the frames for each object individual without having to repeat the block all the time? **

I am sorry for this basic questions, if anyone can recommend resources where I could read more about these specific operations, that would also be great.

Thank you very much in advance! Best, C

lottemacchiato
  • 9
  • 1
  • 4
  • In js function arguments can be also object or function, so you can pass whole `boundingBox` object to your function. You could also improve readability of your `for` loop using [Array#forEach](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/forEach) for `data.predictions` – barbsan Jul 25 '18 at 10:10
  • Was this function `positionInArtboard` created by some ide wizard? It already contains parameters `tagName`, `x` and `y` but you pass only first one (`data.predictions[i].tagName`) and don't use it anyway – barbsan Jul 25 '18 at 10:20
  • @barbsan thank you very much for you quick reply! So if I understand you correctly, in `positionInArtboard(data.predictions[i].tagName)` I would also pass the coordinates like that: `positionInArtboard(data.predictions[i].tagName, boundingBox.left, boundingBox.top)`? – lottemacchiato Jul 25 '18 at 12:49
  • If previous line would be `var boundingBox = data.predictions[i].boundingBox;` that should work, otherwise you'll have to write full name: `data.predictions[i].boundingBox.left` etc. – barbsan Jul 25 '18 at 12:53

0 Answers0