Reorganizing JSON arrays with JavaScript

Question

Reorganizing JSON arrays with JavaScript

Exploring the realm of JSON notation as a newcomer has presented me with an intriguing challenge. I find myself in a situation where I need to reformat the current database format to align with a new structure suitable for importing into a project timeline graph.

The initial JSON format retrieved from the database is as follows:

[
{
  "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, the desired JSON format essential for graph display is structured as follows:

    {
  '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 currently in the process of crafting a function that can effectively achieve this objective. While only epc, m1, or m2 may hold null values, it is imperative to inspect these conditions to determine event ranges' creation and termination points. What would be the most efficient approach to reformat this json data (preferably sourced from an external json sheet)?

Edit: Grateful for the assistance provided so far! It now appears clearer how the reformatting works. On reflection, my initial explanation was not as exhaustive. My actual requirement involves multiple class items per "group".

The ultimate goal is for these items to be displayed sequentially on a timeline graph 'group' line. Consequently, I am exploring ways to generate distinct objects for each array element detailed above.

In practice, the first object's start date would correspond to m3, while its end date would align with m4. Subsequently, the consecutive object would share the same group as the preceding one (5-HP...), initiating at m4 and concluding at m5...and so forth. This sequence persists until m7 (always an end date but never a start date) is reached.

This complexity introduces various conditions, making the looping process less straightforward.

javascript json

Answer 1

Answer №1

Take a look at the working example here: http://jsfiddle.net/K37Fa/

It appears that your input data is in the form of an array, so I created a loop to handle that. If it's not an array, you can view another 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 } }],
  
// Function to retrieve milestone from object
getMileStone = function(obj) {
  propCounter = 1;
    for(propCounter = 1; propCounter <= 7; propCounter++) {
        // return value if m1, m2 and so on exists
        if(obj.timeline["m" + propCounter]) {
            return {key: "m" + propCounter, value: obj.timeline["m" + propCounter]};
        }
    }
};
  
// Loop over content array (assuming it contains 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
 });
}

UPDATE: The getMileStone function is simply a helper-function that can be called with any parameter. For example, you can call it with current[i+1]:

secondMileStone = getMileStone(current[i + 1])

Just make sure to check if you are not already at the last element of your array. If current[i+1] is undefined, then the helper function should also return undefined.

You can fallback to using the firstMileStone in that case:

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

View the updated fiddle (with additional check in the getMileStone helper function): http://jsfiddle.net/K37Fa/6/

Answer 2

Take a look at the working example here: http://jsfiddle.net/K37Fa/

It appears that your input data is in the form of an array, so I created a loop to handle that. If it's not an array, you can view another 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 } }],
  
// Function to retrieve milestone from object
getMileStone = function(obj) {
  propCounter = 1;
    for(propCounter = 1; propCounter <= 7; propCounter++) {
        // return value if m1, m2 and so on exists
        if(obj.timeline["m" + propCounter]) {
            return {key: "m" + propCounter, value: obj.timeline["m" + propCounter]};
        }
    }
};
  
// Loop over content array (assuming it contains 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
 });
}

UPDATE: The getMileStone function is simply a helper-function that can be called with any parameter. For example, you can call it with current[i+1]:

secondMileStone = getMileStone(current[i + 1])

Just make sure to check if you are not already at the last element of your array. If current[i+1] is undefined, then the helper function should also return undefined.

You can fallback to using the firstMileStone in that case:

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

View the updated fiddle (with additional check in the getMileStone helper function): http://jsfiddle.net/K37Fa/6/

Reorganizing JSON arrays with JavaScript

Answer №1

Similar questions

Using Python to extract and process JSON data from a specific portion of a line within

What is the correct way to update an empty object within the state using setState?

Connect the parent object's `this` to the child object's `this` in JavaScript

Error message: "Uncaught TypeError: Cannot set property 'state' of undefined in ReactJS"

JavaScript - Populating Dropdown Menu with Fresh Information

Create a div element within the parent window of the iFrame

Is it possible to create a single button that, upon clicking, fades in one image while simultaneously fading out another?

Promise of a repeating sequence of serial calls

Remove a child node from its parent node in real-time

JavaScript never forgets to validate the user input

modify header when button is clicked

Smooth-scroll plugin does not activate active state (due to JS modification)

Utilizing mixins with async components in VueJS

"Utilize Vue i18n to properly display currency amounts in USD

Run some code and then enter interactive mode

Getting the iframe onload event in an ASP.NET application

Executing JavaScript in Selenium is a common task that can be accomplished by

Utilizing AJAX to dynamically update a div's content by extracting a specific div from the retrieved data

What is the best way to combine a hyperlink with a string in an Angular form?

Is there a way to retrieve the disabled drop-down field value after submitting the form?