Horizontal Scroll Array of JSON Objects - arrays

Question

Ok so i have the results from the JSON array all lined up nicely. They dont seem to move across the screen though. Is it because my txtX = 0; is still in draw? Ive played around but cant seem to remedy this and as a result, still have static text :-(
var scores;
var txtX;
var txtY;
function preload() {
scores = loadJSON("stats.json");
}
function setup() {
createCanvas(700, 700);
}
function draw() {
background(254);
var txtX = 0;
var txtY = 550;
var stats = scores.results;
for (var i = 0; i < stats.length; i++) {
textSize(12);
text(stats[i], txtX, txtY);
var wordWidth = textWidth(stats[i]);
var currentOffset = 15;
txtX = txtX + wordWidth + currentOffset;
}
txtX = txtX - 1;
}
Here is my JSON:
{
"description" : "FA Cup results; 7th January 2017.",
"source" : "http://www.bbc.co.uk/sport/football/results",
"results":[
"Manchester United 4-0 Reading",
"Accrington Stanley 2-1 Luton Town",
"Barrow 0-2 Rochdale",
"Birmingham City 1-1 Newcastle United",
"Blackpool 0-0 Barnsley",
"Bolton Wanderers 0-0 Crystal Palace",
"Brentford 5-1 Eastleigh",
"Brighton & Hove Albion 2-0 Milton Keynes Dons",
"Bristol City 0-0 Fleetwood Town",
"Everton 1-2 Leicester City",
"Huddersfiled Town 4-0 Port Vale",
"Hull City 2-0 Swansea City",
"Ipswich Town 2-2 Lincoln City",
"Millwall 3-0 Bournemouth",
"Norwich City 2-2 Southampton",
"Queens Park Rangers 1-2 Blackburn Rovers",
"Rotherham United 2-3 Oxford United",
"Stoke City 0-2 Wolverhampton Wanderers",
"Sunderland 0-0 Burnley",
"Sutton United 0-0 AFC Wimbledon",
"Watford 2-0 Burton Albion",
"West Bromwich Albion 1-2 Derby County",
"Wigan Athletic 2-0 Nottingham Forest",
"Wycombe Wanderers 2-1 Stourbridge",
"Preston North End 1-2 Arsenal"
]
}
Any help would be greatly appreciated. Thanks.

Answer 1

There's a lot about your code that doesn't make sense:
Why are you using a nested for loop? Your inner for loop seems to iterate over each word in an individual string. Why not just pass the whole string into the text() function instead of each word one at a time?
Why are you only changing currentOffset after that inner loop completes? You're drawing a whole string but only changing the offset for a single word.
Why are you adding 500 to the currentOffset?
Why don't you ever use the txtX variable?
You need to take a step back and rethink exactly what you're doing. If I were you, I would do the following:
You need to keep track of two variables: the txtX variable at the sketch level that keeps track of the start, which scrolls to the left, and a currentWordX variable that keeps track of the offset of the current string relative to the txtX variable.
You only need a single for loop. Even if your eventual goal requires drawing each word separately, start with a single for loop that iterates over the results array.
For each string in the results array, you draw that string. Its X position is txtX + currentWordX. Then you get that string's width and add that value to the currentWordX variable.
After the for loop, you need to decrease the txtX variable to cause the whole thing to scroll to the left.