I am currently utilizing a nested For loop to retrieve data from JSON and then returning a variable for Vue frontend access. Oddly enough, I am only able to retrieve values from the initial element of the nested array. Can anyone assist with this issue? It's quite perplexing.
***There is consistently only 1 job, hence why I am iterating through jobs[0] exclusively.
I have experimented with forEach, For of, For loops, and attempted to use map (although unsure about correct implementation).
At present, I can successfully return the Keys using Vue. Please keep in mind that this example demonstrates the accurate retrieval of JSON data, with the "Data" being passed to functions.
function getData(Data) {
var jobs = Jobs;
var i;
for (i = 0; i < jobs.length; i++) {
return items;
}
}
try {
Data.values = getData(Data);
}
catch (e) {
logError(e);
}
The following displays the Vue:
<div v-for="value in values">{{ value.Key }}</div>
Despite my efforts, it seems ineffective and I'm uncertain as to why?
function getData(Data) {
var jobs = Jobs;
var i;
for (i = 0; i < jobs.length; i++) {
var items = jobs[0].Items;
for (i = 0; i < items.length; i++) {
return items[i].Values;
}
}
}
try {
Data.values = getData(Data);
}
catch (e) {
logError(e);
}
The corresponding Vue segment follows:
<div v-for="value in values">{{ value.Key }}</div>
You'll notice that I've delved one layer deeper into the arrays. However, on the frontend, I still only extract the Key from the initial item. Though I can precisely specify the item to access using return items[2].Values, indicating that I can indeed reach them individually. The JSON formatting is accurate, and I've utilized For loops similarly numerous times without Vue (I'm relatively new to Vue) for data extraction. Before suggesting a Vue-specific method or component, please grasp the necessity for me to utilize separate JavaScript files and functions like this one to return the values accessible on the frontend. It might be an unconventional setup, but it's what I have to work with. I'm somewhat disoriented overall, but resolving this dilemma would be truly beneficial because presently, I would resort to employing the initial example followed by something akin to this (again just illustrative):
<template v-for="item in items">
<div v-for="value in values">{{ thing.Key }}</div>
</template>
This approach suffices for simple tasks, but as I delve deeper into the JSON structure, complications arise. Some of the values are buried 5 or 6 levels deep, encompassed by conditional statements, necessitating mathematical calculations on certain values to parse strings and tally other elements. Moreover, some items are objects while others at the same hierarchical level in the JSON are arrays. It's quite convoluted, and refining it within the for statements would prove immensely beneficial.
All forms of assistance are sincerely appreciated.