CODEWITHSUNDEEP
javascriptjson
user1898946
user1898946

Reputation: 11

JavaScript Reformatting JSON arrays

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.

Upvotes: 0

Views: 937

Answers (1)

hereandnow78
hereandnow78

Reputation: 14434

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/

Upvotes: 1

Related Questions