Get data from a JSON file using JavaScript

Question

Get data from a JSON file using JavaScript

Dealing with a rather intricate and detailed JSON structure, I have a specific extraction task at hand.

The goal is to retrieve information (text) from the JSON only if the resource-id includes the text

"com.shazam.android:id/"

and certain properties (

["title", "subtitle", "datetime"]

) are present.

If the last element does not contain a datetime, then resorceIdFinal should not be included.

Below is a sample JSON that illustrates what I am aiming to achieve.

You can access the JSON I am working with through this link: https://pastebin.com/raw/hFLmP2T8

// JavaScript code snippets...

// Function to check presence of keys in an object
const check = (obj, keys) => !keys.some((el) => !obj.hasOwnProperty(el));

// Function to check if an object is empty
const isObjectEmpty = (objectName) => {
  return (
    objectName &&
    Object.keys(objectName).length === 0 &&
    objectName.constructor === Object
  );
};

// More functions related to processing the JSON data...

The desired JSON output:

[
   {
        "title": "Believe",
        "subtitle": "Chuther",
        "datetime": "12 giu, 16:42"
   },
   // Additional JSON objects...
]

Your assistance would be greatly appreciated!

Edit:

// Updated JavaScript code snippet...

// Function to check if an object is empty
const isObjectEmpty = (objectName) =>
(
  objectName &&
  Object.keys(objectName).length === 0 &&
  objectName.constructor === Object
);

// More updated functions for extracting information from JSON data...

javascript arrays json object filter

Answer 1

Answer №1

This recursive function continues to call itself, but does not utilize the result:

const fetchChildren = (el, replaceText, props, resourceIdFinal) => {
  var childrenArray = [];

  el.forEach((element) => {
    let resourceId = findResourceId(element.attributes, replaceText, props, resourceIdFinal);
    if(!isObjectEmpty(resourceId)) childrenArray.push(resourceId);   
    //console.log(childrenArray);
    fetchChildren(element.children, replaceText, props, resourceIdFinal);
  });
  
  return childrenArray;
};

The return value of

fetchChildren(el.children, replaceText, props, resourceIdFinal)

is not being utilized. Make sure to add this result to the childrenArray if that was the intention:

const fetchChildren = (el, replaceText, props, resourceIdFinal) => {
  var childrenArray = [];

  el.forEach((element) => {
    let resourceId = findResourceId(element.attributes, replaceText, props, resourceIdFinal);
    if(!isObjectEmpty(resourceId)) childrenArray.push(resourceId);   
    //console.log(childrenArray);
    childrenArray.push(...fetchChildren(element.children, replaceText, props, resourceIdFinal));
  });
  
  return childrenArray;
};

It's important to note that there may be other issues in the code provided. This answer attempts to address the issue mentioned, but further debugging may be necessary. Consider using a debugger to identify any additional problems and ask separate questions if needed.

Answer 2

This recursive function continues to call itself, but does not utilize the result:

const fetchChildren = (el, replaceText, props, resourceIdFinal) => {
  var childrenArray = [];

  el.forEach((element) => {
    let resourceId = findResourceId(element.attributes, replaceText, props, resourceIdFinal);
    if(!isObjectEmpty(resourceId)) childrenArray.push(resourceId);   
    //console.log(childrenArray);
    fetchChildren(element.children, replaceText, props, resourceIdFinal);
  });
  
  return childrenArray;
};

The return value of

fetchChildren(el.children, replaceText, props, resourceIdFinal)

is not being utilized. Make sure to add this result to the childrenArray if that was the intention:

const fetchChildren = (el, replaceText, props, resourceIdFinal) => {
  var childrenArray = [];

  el.forEach((element) => {
    let resourceId = findResourceId(element.attributes, replaceText, props, resourceIdFinal);
    if(!isObjectEmpty(resourceId)) childrenArray.push(resourceId);   
    //console.log(childrenArray);
    childrenArray.push(...fetchChildren(element.children, replaceText, props, resourceIdFinal));
  });
  
  return childrenArray;
};

It's important to note that there may be other issues in the code provided. This answer attempts to address the issue mentioned, but further debugging may be necessary. Consider using a debugger to identify any additional problems and ask separate questions if needed.

Answer 3

Answer №2

If your requirements remain consistent as discussed in the comments, you can extract the data by processing the json string line by line.

After reviewing the desired output and the source json, it appears that the text attributes within the json structure correspond to title, subtitle, and datetime. Whenever a text attribute is encountered sequentially, the algorithm stores it as the most recent one. Subsequently, when a specific indicator is detected, such as:

com.shazam.android:id/title
com.shazam.android:id/subtitle
com.shazam.android:id/datetime

... The previously saved text attribute is assigned to the corresponding property.
The detection of datetime denotes the completion of a record, which is then added to an array to facilitate the progressive creation of subsequent records.

The finer details are elucidated within the code itself and accompanying comments.

This demonstration exemplifies a functional approach. Simply copy and paste the json data into the provided text area before clicking the button. It's important for the json input to be correctly formatted; initially parsed and then serialized to ensure proper line separation. These steps may be bypassed once the input format is known to be compliant.

function extract( input_json ) {    
        
    // Assume the original json needs line-breaking:
    try {
        let _parsed = JSON.parse( input_json );
        input_json = JSON.stringify( _parsed , null, 1);
    }
    catch (e) {
        console.log("Error parsing json");
        return false;
    }
    
    
    // Convert into an array with each line as an index
    
    let json_lines = input_json.split("\n");
    
    
    // Proceed with a linear search to gather relevant data
    
    let output = []; // holds the final results
    
    let last_passed_text = ''; // retains the value of the last "text" attribute encountered
    
    
    let current_record = {}; // keeps track of the ongoing record construction
    
    
    for (let i = 0; i < json_lines.length; i++) {
        
        let textPos = json_lines[i].indexOf('"text"');
        
        if ( textPos > -1) {
        
            let _firstColon = json_lines[i].indexOf(":");
            
            if (_firstColon > textPos) {
        
            // Splitting at colon since `"text" :` signifies the sought definition
            
                let relevantPart = json_lines[i].substring( _firstColon + 1).trim(); 
            
            try {
                relevantPart = decodeURIComponent( relevantPart ); 
            }
            catch {}
            
                // Assuming the characters after colon act like `"abcdef",`, disregarding boolean values
                
                let token = relevantPart.substring(1,relevantPart.length-2); 
                
                last_passed_text = token.toString(); 
                
            }
        }
        
        if ( json_lines[i].indexOf("resource-id") > -1) {
            
            if ( json_lines[i].indexOf("com.shazam.android:id/title") > -1) {
                
                // Presence of title always marks the beginning of collection
                
                current_record = {};
                current_record.title = last_passed_text.toString(); 
                
                
            }
            else if ( json_lines[i].indexOf("com.shazam.android:id/subtitle") > -1) {
                current_record.subtitle = last_passed_text.toString(); 
               
            }
            else if ( json_lines[i].indexOf("com.shazam.android:id/datetime") > -1) {
                current_record.datetime = last_passed_text.toString(); 
                
                // Presence of datetime signifies end of collection
                
                output.push( JSON.parse(JSON.stringify( current_record )) );
                
            }
        }
    
    }
    
    return output;
}

Paste json here: (input)<br>
<textarea id="input-json" rows=15 cols=50></textarea>
<hr>
<button type="button" onclick="
    console.log( 
        extract( 
            document.getElementById('input-json').value
        ) 
    );">Extract To Console</button>

Answer 4

If your requirements remain consistent as discussed in the comments, you can extract the data by processing the json string line by line.

After reviewing the desired output and the source json, it appears that the text attributes within the json structure correspond to title, subtitle, and datetime. Whenever a text attribute is encountered sequentially, the algorithm stores it as the most recent one. Subsequently, when a specific indicator is detected, such as:

com.shazam.android:id/title
com.shazam.android:id/subtitle
com.shazam.android:id/datetime

... The previously saved text attribute is assigned to the corresponding property.
The detection of datetime denotes the completion of a record, which is then added to an array to facilitate the progressive creation of subsequent records.

The finer details are elucidated within the code itself and accompanying comments.

This demonstration exemplifies a functional approach. Simply copy and paste the json data into the provided text area before clicking the button. It's important for the json input to be correctly formatted; initially parsed and then serialized to ensure proper line separation. These steps may be bypassed once the input format is known to be compliant.

function extract( input_json ) {    
        
    // Assume the original json needs line-breaking:
    try {
        let _parsed = JSON.parse( input_json );
        input_json = JSON.stringify( _parsed , null, 1);
    }
    catch (e) {
        console.log("Error parsing json");
        return false;
    }
    
    
    // Convert into an array with each line as an index
    
    let json_lines = input_json.split("\n");
    
    
    // Proceed with a linear search to gather relevant data
    
    let output = []; // holds the final results
    
    let last_passed_text = ''; // retains the value of the last "text" attribute encountered
    
    
    let current_record = {}; // keeps track of the ongoing record construction
    
    
    for (let i = 0; i < json_lines.length; i++) {
        
        let textPos = json_lines[i].indexOf('"text"');
        
        if ( textPos > -1) {
        
            let _firstColon = json_lines[i].indexOf(":");
            
            if (_firstColon > textPos) {
        
            // Splitting at colon since `"text" :` signifies the sought definition
            
                let relevantPart = json_lines[i].substring( _firstColon + 1).trim(); 
            
            try {
                relevantPart = decodeURIComponent( relevantPart ); 
            }
            catch {}
            
                // Assuming the characters after colon act like `"abcdef",`, disregarding boolean values
                
                let token = relevantPart.substring(1,relevantPart.length-2); 
                
                last_passed_text = token.toString(); 
                
            }
        }
        
        if ( json_lines[i].indexOf("resource-id") > -1) {
            
            if ( json_lines[i].indexOf("com.shazam.android:id/title") > -1) {
                
                // Presence of title always marks the beginning of collection
                
                current_record = {};
                current_record.title = last_passed_text.toString(); 
                
                
            }
            else if ( json_lines[i].indexOf("com.shazam.android:id/subtitle") > -1) {
                current_record.subtitle = last_passed_text.toString(); 
               
            }
            else if ( json_lines[i].indexOf("com.shazam.android:id/datetime") > -1) {
                current_record.datetime = last_passed_text.toString(); 
                
                // Presence of datetime signifies end of collection
                
                output.push( JSON.parse(JSON.stringify( current_record )) );
                
            }
        }
    
    }
    
    return output;
}

Paste json here: (input)<br>
<textarea id="input-json" rows=15 cols=50></textarea>
<hr>
<button type="button" onclick="
    console.log( 
        extract( 
            document.getElementById('input-json').value
        ) 
    );">Extract To Console</button>

Get data from a JSON file using JavaScript

Answer №1

Answer №2

Similar questions

How can we avoid excessive re-rendering of a child component in React when making changes to the parent's state?

Navigating through different components in Angular without using templates

Utilize React to extract a JSON object nested within an array and then implement a dropdown sorting feature for the JSON

JsonResult from MVC contains information, yet the browser is devoid of any data

Unlocking the true potential of JSON data encoding in PHP

Maintaining the dropdown in the open position after choosing a dropdown item

Is there a way to configure eslint to recognize and allow the nullish-coalescing assignment syntax?

Is there a way to make JavaScript function properly with PHP-generated content?

The model in the Schema has not been registered, unlike other models from the same source that have been successfully registered

How to troubleshoot Python errors (+mod_wsgi) using the Chrome Network panel

Mocha Chai: Dive into an array of elements, discovering only fragments of the desired object

How to send a JSONArray with just a single string using retrofit

The concept of setTimeout and how it affects binding in JavaScript

What is the best way to incorporate a logo container and a horizontal divider into my top navigation bar using Bootstrap?

Unable to retrieve the previous API response and add it to the URL for the POST request API

Trigger an alert message upon loading the HTML page with search text

Combining the inline JavaScript linting tool ESLint with the popular Airbnb configuration and Facebook

Tips for displaying the HTML content within the autocomplete box

Options menu in an Android Studio application

Showing the advancement of a String[] in Android app