Loop through a JSON object in JavaScript, merging dates and times based on their order of occurrence

Question

Loop through a JSON object in JavaScript, merging dates and times based on their order of occurrence

I have been diving into a solution inspired by the discussion in this thread, but I am facing a roadblock when it comes to handling the formatting disparity between my JSON data and the example provided. It could be that this challenge is simpler than I perceive it to be; any guidance or references pointing me in the right direction would be greatly appreciated.

UPDATE: The JSON structure I'm dealing with looks like this:

[{"test":{"field1":"test123"},"info""2021-10-04\nPage visit 09:57:33\n - URL: https://www.google.com/\nPage visit 09:57:50\n - URL: https://www.google.com/blah-blah-blah/\nPage visit 09:56:03\n - URL: https://google.com/random-text/blah/\n\n2021-11-04\nPage visit 13:46:03\n - URL: https://www.google.com/blah/blah-blah/\n\n"}]

My aim is to parse through this data string, extract each URL, date, and timestamp, combine the dates and timestamps into a unified "yyyy-mm-dd 00:00:00" datetime format (e.g., "2021-10-04 08:57:23"), and then store these combined datetime values along with their corresponding URLs in a two-column array.

Although I can isolate the URLs and dates using regex, the challenge lies in pairing up the correct timestamps with their respective dates since they are listed separately.

//Extract URLs, dates, times
const urlMatches = text.match(/\bhttps?:\/\/\S+/gi);
const dateMatches = text.match(/(\d{1,4}([.\-/])\d{1,2}([.\-/])\d{1,4})/g);
const timeMatches = text.match(/\d{1,2}\D\d{1,2}\D(\d{4}|\d{2})/g);

javascript arrays json

Answer 1

Answer №1

Utilize functions like map and reduce, although it's uncertain if they offer better readability compared to the straightforward forEach method. Remove those line breaks with a different delimiter for improved clarity. While optional, this will simplify the process. Then employ a regex such as p1 to segment it into date clusters. Take note of the clear indicator of a double line break. Leverage matchAll along with spreading to transform it into an array.

Go through that array step by step. With the assistance of the initial capturing group, the date resides in the first position. Save the date in a variable, then apply a secondary regex to isolate the time/URL pairs (from the second capturing group), subsequently iterating through them to combine with the stored date value.

const data = {
  "info": [
    "2021-10-04\nPage visit 09:57:33\n - URL: https://www.google.com/\nPage visit 09:57:50\n - URL: https://www.google.com/blah-blah-blah/\nPage visit 09:56:03\n - URL: https://google.com/random-text/blah/\n\n2021-11-04\nPage visit 13:46:03\n - URL: https://www.google.com/blah/blah-blah/\n\n"
  ]
};

const text = data.info[0];
const p1 = /(\d{4}-\d{2}-\d{2})~(.*?)~~/g;
let vals = [...text.replaceAll("\n", "~").matchAll(p1)];

const p2 = /page visit\s+([^~]*)~\s+-\s+url:\s+([^~]*)/ig;
let buffer = [];

vals.forEach(v=>{
  let t = v[1];
  let parsed = [...v[2].matchAll(p2)];
  parsed.forEach(p=>{
    buffer.push({dt: t, time: p[1], url: p[2]});  
  });
});

console.log(buffer);

If the date groups are delimited by a double line break and the date itself is succeeded by a single line break, then the initial pattern can be streamlined, for instance: /([^~]*)~(.*?)~~/g. It's worth noting that the ~~ terminator only functions effectively if the last date is trailed by a double line break, which appears to be the case. Should that not be true, consider using something like (?:~~)? instead of just ~~.

Answer 2

Utilize functions like map and reduce, although it's uncertain if they offer better readability compared to the straightforward forEach method. Remove those line breaks with a different delimiter for improved clarity. While optional, this will simplify the process. Then employ a regex such as p1 to segment it into date clusters. Take note of the clear indicator of a double line break. Leverage matchAll along with spreading to transform it into an array.

Go through that array step by step. With the assistance of the initial capturing group, the date resides in the first position. Save the date in a variable, then apply a secondary regex to isolate the time/URL pairs (from the second capturing group), subsequently iterating through them to combine with the stored date value.

const data = {
  "info": [
    "2021-10-04\nPage visit 09:57:33\n - URL: https://www.google.com/\nPage visit 09:57:50\n - URL: https://www.google.com/blah-blah-blah/\nPage visit 09:56:03\n - URL: https://google.com/random-text/blah/\n\n2021-11-04\nPage visit 13:46:03\n - URL: https://www.google.com/blah/blah-blah/\n\n"
  ]
};

const text = data.info[0];
const p1 = /(\d{4}-\d{2}-\d{2})~(.*?)~~/g;
let vals = [...text.replaceAll("\n", "~").matchAll(p1)];

const p2 = /page visit\s+([^~]*)~\s+-\s+url:\s+([^~]*)/ig;
let buffer = [];

vals.forEach(v=>{
  let t = v[1];
  let parsed = [...v[2].matchAll(p2)];
  parsed.forEach(p=>{
    buffer.push({dt: t, time: p[1], url: p[2]});  
  });
});

console.log(buffer);

If the date groups are delimited by a double line break and the date itself is succeeded by a single line break, then the initial pattern can be streamlined, for instance: /([^~]*)~(.*?)~~/g. It's worth noting that the ~~ terminator only functions effectively if the last date is trailed by a double line break, which appears to be the case. Should that not be true, consider using something like (?:~~)? instead of just ~~.

Answer 3

Answer №2

To begin with, you can divide the lengthy string using the .split() method by separating it at each line break ("\n"). After that, employing the .reduce() function on the divided array allows for various manipulations such as matching, conversion to dates, and more.

Answer 4

To begin with, you can divide the lengthy string using the .split() method by separating it at each line break ("\n"). After that, employing the .reduce() function on the divided array allows for various manipulations such as matching, conversion to dates, and more.

Answer 5

Answer №3

To achieve the desired outcome, you can utilize a combination of the .split(), .map(), and .reduce() methods in the following manner:

const data = jsonData.info.map(line =>
    line.split(/[\n]{2,}/)
        .filter(l => l)
        .map(ln => ln.split(/(?:\n| - |URL: |Page visit )+/)
            .filter(v => v)
            .map(arr => arr.slice(1).reduce((acc, cur, i, ar) => i % 2 === 0 ? [...acc, ar.slice(i, i + 2)] : acc, [])
                .map(([time, url]) => ({
                    timestamp: `${arr[0]} ${time}`,
                    url
                }))
            )
        )
        .flat()
);

DEMO

const jsonData = {
  "info": [
    "2021-10-04\nPage visit 09:57:33\n - URL: https://www.google.com/\nPage visit 09:57:50\n - URL: https://www.google.com/blah-blah-blah/\nPage visit 09:56:03\n - URL: https://google.com/random-text/blah/\n\n2021-11-04\nPage visit 13:46:03\n - URL: https://www.google.com/blah/blah-blah/\n\n"
  ]
}

const data = jsonData.info.map(line => 
    line.split(/[\n]{2,}/)
        .filter(l => l)
        .map(ln => ln.split(/(?:\n| - |URL: |Page visit )+/)
            .filter(v => v)
            .map(arr => arr.slice(1).reduce((acc,cur,i,ar) => i%2 === 0 ?[...acc,ar.slice(i,i+2)] : acc,[])
                .map(([time, url]) => ({timestamp:`${arr[0]} ${time}`,url}))
            )
        )
        .flat()
);

console.log( data );

Answer 6

To achieve the desired outcome, you can utilize a combination of the .split(), .map(), and .reduce() methods in the following manner:

const data = jsonData.info.map(line =>
    line.split(/[\n]{2,}/)
        .filter(l => l)
        .map(ln => ln.split(/(?:\n| - |URL: |Page visit )+/)
            .filter(v => v)
            .map(arr => arr.slice(1).reduce((acc, cur, i, ar) => i % 2 === 0 ? [...acc, ar.slice(i, i + 2)] : acc, [])
                .map(([time, url]) => ({
                    timestamp: `${arr[0]} ${time}`,
                    url
                }))
            )
        )
        .flat()
);

DEMO

const jsonData = {
  "info": [
    "2021-10-04\nPage visit 09:57:33\n - URL: https://www.google.com/\nPage visit 09:57:50\n - URL: https://www.google.com/blah-blah-blah/\nPage visit 09:56:03\n - URL: https://google.com/random-text/blah/\n\n2021-11-04\nPage visit 13:46:03\n - URL: https://www.google.com/blah/blah-blah/\n\n"
  ]
}

const data = jsonData.info.map(line => 
    line.split(/[\n]{2,}/)
        .filter(l => l)
        .map(ln => ln.split(/(?:\n| - |URL: |Page visit )+/)
            .filter(v => v)
            .map(arr => arr.slice(1).reduce((acc,cur,i,ar) => i%2 === 0 ?[...acc,ar.slice(i,i+2)] : acc,[])
                .map(([time, url]) => ({timestamp:`${arr[0]} ${time}`,url}))
            )
        )
        .flat()
);

console.log( data );

Loop through a JSON object in JavaScript, merging dates and times based on their order of occurrence

Answer №1

Answer №2

Answer №3

Similar questions

Specialized serializer and deserializer utilizing GSON for a collection of BasicNameValuePairs

What causes alterations in a single cell to spread to adjacent cells within this 2D array initialized using the fill function?

Manipulating the DOM with Javascript and jQuery: Adding a new element and retrieving its reference

Guide to displaying a canvas as an image in a new tab using Reactjs

Creating a dynamic column template that displays and checks checkboxes conditionally

Alter the truth value of an item contained within an array

Hold off on transmitting information until all Promises have been fulfilled

Access data from a multi-dimensional array with the help of a variable

Slow execution of Bootstrap v4 modal display

"Trouble ensues when OrbitControls fail to function properly while loading a

Assignment: Creating a pointer-based array

How to extract information for divs with specific attribute values using Jquery

Is there a way to convert NuGet.NuGetVersion to a class in C# through deserialization?

Sending data via an AJAX POST request in the request parameter

Which Jackson versions are compatible with the JBoss 6.4.20 patch?

How can I show a dynamic popover with specific content when a "Copy" action is triggered?

Rediscovering the Depths of Nested JSON Arrays in Postgres

Saving User Identification on Client-Side Application to Make API Requests

Is there a way to verify the textbox value in MVC without the need for clicking submit or performing a postback

Retrieve items from an array using a series of nested map operations