JavaScript Reformatting JSON arrays

Question

I am relatively new to the JSON notation, and have run into an issue when attempting to reformat. The current format contained in the database needs to be modified to a new format for importation into a project timeline graph.

Here is the current JSON format:

[
{
  "name":"5-HP-N/A-N/A-F8",
  "node":{
     "name":"5",
     "id":14
  },
  "timeline":{
     "epc":null,
     "m1":null,
     "m2":null,
     "m3":1554087600000,
     "m4":1593572400000,
     "m5":1625108400000,
     "m6":1641006000000,
     "m7":1656644400000
  },
  "fab":{
     "name":"F8",
     "id":1
  }
},

However, in order to display in the graph, I need the following format:

    {
  'start': new Date(value from epc, or first non-null milestone),
  'end': new Date(value from m1 or first non-null milestone),  // end is optional
  'content': 'label from start Date milestone'
  'group' : ' value from name field above 5-HP'
  'classname' : ' value from start Date milestone' 
});

I am trying to write a function in order to accomplish this. Only epc, m1, or m2 may have the value of null, but the condition must be checked for to determine if an event range should be created and where it should end. What would be the best way to reformat this json data (preferrably from an external json sheet)?

Edit: Thanks for all the help I see how this is working now! I believe I didn't explain very well the first time though, I actually need multiple class items per "group".

The end result is that these will display inline on a timeline graph 'group' line, and so I am trying to figure out how to create multiple new objects per array element shown above.

So technically, the first one will have start date = m3, and end date = m4. Then, the next object would have the same group as the first (5-HP...), the start date = m4, end date = m5...etc. This would continue until m7 (always an end date but never a start date) is reached.

This is why the loop is not so simple, as many conditions to check.

Did you write anything so far? Why is this not a simple loop? — Aditya M P
– Aditya M P, Commented Dec 16, 2012 at 18:05
The issue is that my data is an array of different groups based on names, and I must discard the node and fab information. — user1898946
– user1898946, Commented Dec 16, 2012 at 18:20
I can extract the values with a loop, but is it possible to extract the label? — user1898946
– user1898946, Commented Dec 16, 2012 at 18:22

hereandnow78 · Accepted Answer · 2012-12-16 19:02:20Z

1

see a working fiddle here: http://jsfiddle.net/K37Fa/

your input-data seems to be an array, so i build a loop around that. if not just see this fiddle where the input data is a simple object: http://jsfiddle.net/K37Fa/1/

var i 
  , result = [],
  , current
  , propCounter
  , content = [ { "name":"5-HP-N/A-N/A-F8", "node":{ "name":"5", "id":14 }, "timeline":{ "epc":null, "m1":null, "m2":null, "m3":1554087600000, "m4":1593572400000, "m5":1625108400000, "m6":1641006000000, "m7":1656644400000 }, "fab":{ "name":"F8", "id":1 } }],


// get the milestone in a function
getMileStone = function(obj) {
  propCounter = 1;
    for(propCounter = 1; propCounter <= 7; propCounter++) {
        // if m1, m2 and so on exists, return that value
        if(obj.timeline["m" + propCounter]) {
            return {key: "m" + propCounter, value: obj.timeline["m" + propCounter]};
        }
    }
};


// loop over content array (seems like you have an array of objects) 
for(i=0;i< content.length;i++) {
  current = content[i];
  firstMileStone = getMileStone(current); 
  result.push({
    'start': new Date(current.epc || firstMileStone.value),
    'end': new Date(current.m1 || firstMileStone.value),
    'content': firstMileStone.key,
    'group' : current.name,
    'classname' : firstMileStone.value
 });
}

EDIT: getMileStone is just a helper-function, so you could just call it with whatever you want. e.g. current[i+1]:

secondMileStone = getMileStone(current[i + 1])

you should just check, if you are not already at the last element of your array. if so current[i+1] is undefined, and the helperfunction should return undefined.

you could then use as fallback the firstMileStone:

secondMileStone = getMileStone(current[i + 1]) || firstMileStone;

see the updated fiddle (including check in the getMileStone-Helperfunction): http://jsfiddle.net/K37Fa/6/

edited Dec 16, 2012 at 19:02

answered Dec 16, 2012 at 18:19

hereandnow78

14.5k8 gold badges46 silver badges49 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

user1898946 Over a year ago

Wow thanks! That really helps...one question I had was if I could set next = content[i +1]; and then, set secondMileStone = getMileStone(next), if this would work to set the end date to the beginning of the next milestone.

hereandnow78 Over a year ago

see my edit, just use the getMileStone function inside the loop

user1898946 Over a year ago

Thanks so much for the help! I have edited my question above, as your solution certainly accomplishes this, but I need to create multiple objects from a singular JSON array (Using group as commonality). One for each start/end date present to be loaded into a graph

Collectives™ on Stack Overflow

JavaScript Reformatting JSON arrays

1 Answer 1

3 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related