Finding the dimensions of a JSON object and transferring all the information into an array using JavaScript

Fetching data from an API will result in various JSON objects with differing lengths and content, including a mix of objects and arrays that can be nested multiple levels deep.

The goal is to extract all data pairs and consolidate them into a single 2D array for easier integration into Google Sheets using a script.

This is the initial code:

function parseTheAPI(rawResponse){
  var theparsedJSONdata = JSON.parse(rawResponse)
  console.log(theparsedJSONdata)
  return theparsedJSONdata
};

Below is the output seen on the console:

{ '0xabcxyz': 
   { products: [ [Object] ],
     meta: [ [Object], [Object], [Object] ] } }

Although individual data points can be accessed once the object contents are known, any changes in the object structure could break the code.

The objective is to dynamically access all information pairs within the JSON data at any depth.

Attempts have been made to use recursion to explore the depths of the data, as shown below:

function logJsonLevelOne(parsedJson){
  for(var k in parsedJson){
    if(parsedJson[k] instanceof Object){
      console.log("parsedJsonOne = "+ parsedJson[k])
      var n = Array.isArray(logJsonLevelOne[k])
      logJsonLevelOne(parsedJson[k])
    } else {
      var n = logJsonLevelOne[k] instanceof Array;
      console.log(n)
    }
  }
};

While some data is printed, accessing the next level remains unclear. Understanding the nature of the data coming out of each part of the "if" test proves challenging.

Efforts have been put into extracting this data into two rows on a Google Sheet for daily tracking, considering potential variations in the incoming JSON object structure.

Referencing raw data from the API:

{"0x0000123456abcdef":{...}}}

Further attempts were made using code from a Stack Overflow question, but certain outputs are not appearing as expected.

Answer №1

Check out this demonstration showcasing the flattening function in action. It all starts with a text string, which represents the response retrieved from your API call:

let sourceData = '{"0x0000123456abcdef":{"products":[{"label":"Aave V2","assets":[{"type":"interest-bearing","category":"deposit","address":"0x27F8D03b3a2196956ED754baDc28D73be8830A6e","symbol":"DAI","decimals":18,"label":"DAI in Aave","img":"networks/polygon/0x8f3cf7ad23cd3cadbd9735aff958023239c6a063.png","protocol":"aave","protocolDisplay":"Aave","protocolSymbol":"AAVE","price":0.999254,"apy":0.027310184786005925,"balanceRaw":"2668910745526108687981","balance":2668.910745526109,"balanceUSD":2666.9197381099466},{"type":"claimable","category":"claimable","address":"0x0d500b1d8e8ef31e21c99d1db9a6444d3adf1270","symbol":"WMATIC","decimals":18,"label":"Claimable WMATIC","img":"networks/polygon/0x0d500b1d8e8ef31e21c99d1db9a6444d3adf1270.png","price":1.65,"balance":0.042818503811087726,"balanceRaw":"42818503811087730","balanceUSD":0.07065053128829474}],"meta":[]}],"meta":[{"label":"Total","value":2666.990388641235,"type":"dollar"},{"label":"Assets","value":2666.990388641235,"type":"dollar"},{"label":"Debt","value":0,"type":"dollar"}]}}';

JSON.flatten = function(data) {
    var result = {};
    function recurse (cur, prop) {
        if (Object(cur) !== cur) {
            result[prop] = cur;
        } else if (Array.isArray(cur)) {
             for(var i=0, l=cur.length; i<l; i++)
                 recurse(cur[i], prop ? prop+"."+i : ""+i);
            if (l == 0)
                result[prop] = [];
        } else {
            var isEmpty = true;
            for (var p in cur) {
                isEmpty = false;
                recurse(cur[p], prop ? prop+"."+p : p);
            }
            if (isEmpty)
                result[prop] = {};
        }
    }
    recurse(data, "");
    return result;
}

let targetData = JSON.flatten(JSON.parse(sourceData));

console.log(targetData);

Upon executing this code snippet, you will generate data in JavaScript objects like the summarized examples below:

"0x0000123456abcdef.products.0.assets.0.type": "interest-bearing"
"0x0000123456abcdef.products.0.assets.0.symbol": "DAI"
"0x0000123456abcdef.products.0.assets.0.price": 0.999254
​"0x0000123456abcdef.products.0.assets.0.balanceRaw": "2668910745526108687981"

and:

"0x0000123456abcdef.products.0.assets.1.type": "claimable"
"0x0000123456abcdef.products.0.assets.1.symbol": "WMATIC"
​"0x0000123456abcdef.products.0.assets.1.price": 1.65
​"0x0000123456abcdef.products.0.assets.1.balanceRaw": "42818503811087730"

This shows how the data hierarchy is represented in flattened names during the process.

If these names are not user-friendly enough for your purposes, further manipulation might be necessary to convert them into a more readable format.

Answer №2

Here's a function I've created to extract pairs from JSON data:

let result = []; 
function getPairs(jsonString){
  var data = JSON.parse(jsonString)
  findPairs(eval(data),'data')
  return result
}
function findPairs(obj,id) {
  const regex = new RegExp('[^0-9]+');
  for (let key in obj) {
    var newid = (regex.test(key)) ? id + '.' + key : id + '[' + key + ']';
    if (obj[key]!=null){
      if (typeof obj[key] != 'object' && typeof obj[key] != 'function'){
        result.push([key, obj[key]]);
      }
      if (typeof obj[key] == 'object') {
        findPairs( obj[key], newid );
      }
    }
  }
} 

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

What's the reason for this Ajax request taking such a long time to display on the

My webpage features dynamic content created by Ajax, refreshing every 30 seconds with new information from the database. The PHP side of things seems to be functioning properly, but I suspect there might be an issue either in my JavaScript code or within t ...

Ways to render component solely based on the alteration of the class props

In my ReactJS project, I am fetching JSON data from a RESTful Django host and using it to create a table with filters. Here is my Table class: class MainTable extends React.Component { constructor(props) { super(props); this.state = { res ...

Create an unshaded circle using Three.js

I need assistance in creating a circular design that resembles the orbital patterns displayed on this website. My preference is to implement this using Three.js rather than pure WebGL. ...

Step-by-step guide on programmatically closing the Material-UI DropDownMenu

http://www.material-ui.com/#/components/dropdown-menu Having encountered a styling issue, I was compelled to rearrange the order of components within my material-ui DropdownMenu. Nevertheless, some buttons (renderNavLink) are now failing to close the Dro ...

What is the process for inserting text into a Word document using the Google Docs API?

Struggling to generate a Word document with text and images, but the text refuses to show up. My document remains blank, even though there seems to be no issue with my code. Any guidance on what I might be missing would be greatly appreciated. gapi.client ...

Is there a method to extract the y value for a specific x value that is not part of the current data set in a Chart.js graph

I have a set of data points like { x: 5, y: 10 }, { x: 10, y: 15 }, { x: 20, y: 25 }. With Chart.js, I can easily create a chart based on these points. Is there a method to retrieve the y value for a specific x value, such as 13, from the rendered chart? ...

Refresh and maintain the default dates in the datepicker

Here is the HTML code snippet that I am working with: <div style="display: inline-block; font-weight: bold;"> <label for="fromDateRange">From:</label> <div id="fromDateRange"></div> </div> <div style="margin ...

Typescript - unexpected behavior when using imported JavaScript types:

I am struggling with headaches trying to integrate an automatically generated JavaScript library into TypeScript... I have packaged the JavaScript library and d.ts file into an npm package, installed the npm package, and the typings modules in the TypeScr ...

What is the best way to extract a JSON value and use it across multiple functions?

Currently, everything seems to be working fine. However, I'm unsure about the correct way to call the json data. I attempted using a direct link but it didn't work. Do I need to modify the "data" parameters? I'm confused because I saw that ...

Using Node.js to handle reading files and dealing with undefined or null values

The get method is responsible for receiving a userid with an initial total number of points defined in the stcok.json file, along with various transactions stored in another file. Below are some sample entries from the stock JSON: [ { "user" ...

Too many variables to consider - from various components to varying quantities and different sets of rules

Imagine I have a unique item made up of two parts: X quantity of Component A and Y quantity of Component B. When this item is selected in the form for editing, the default quantities are displayed. However, users should be able to edit X to any desired nu ...

What is the best way to retrieve data input from my select dropdown?

I have a select menu generated from a database and I want to display the value of the selected option in an input field. Currently, my code only shows the value of the first option. How can I modify it to display all selected values? Thank you. <?php ...

The JSON capabilities of Oracle 12c

I am working with two tables - Employee and Loans. The Loans table has a foreign key reference to the Employee table, allowing multiple loans per employee. For this scenario, I am focusing on one type of loan, specifically "creditLoan". My goal is to orga ...

Disable the default marker in Mapbox Geocoder

As a newcomer in the world of ReactJS and Mapbox GL JS, I am working on a project where I have successfully integrated a map with Geocoder, Navigation Controls, and Markers based on locations from a JSON file. However, I encountered an issue - whenever I s ...

Display a message indicating no data is available if the specified text is not found within the div

In the code snippet below, there is an input element followed by a div containing multiple child elements: <input type="text" onkeyup="filter()" id="filter_data"> <div id="body"> <div class="child"> Text 1 </div> <div class ...

Utilizing jQuery to dynamically load content that relies on javascript within a specified div

I came up with a function that can easily add floating resizable content to a webpage: function AddFloatingWindow(id) { var window = document.createElement('div'); $(window).attr('id', id); $(window).height(100) ...

CSS - achieving equal height and width for all flex items without specifying fixed values for height and weight

There are 3 flex items displayed here, but the 2nd item has a wider width due to its lengthy description. https://i.sstatic.net/OLy1r.png Is there a way to ensure that all flex items have equal height and width without specifying fixed values, especially ...

Unable to render Row using MySQL in conjunction with ReactJS

Recently, I started working on developing a table using ReactJS on the FrontEnd, NodeJS on the BackEnd, and MySQL for the database. I am trying to retrieve data based on a Select request using the primary key (Code) from the list. https://i.sstatic.net/tXP ...

Incorporating a new Autodesk Forge extension

Hey there! I'm currently working on integrating a forge extension into my viewer, but I seem to have missed something along the way. I've been following this helpful guide: Here's the code snippet that I'm using: <body> < ...

Using $watch to monitor the existence of a variable within the AngularJS scope

I'm working on a directive that displays alerts, and I want to set up a timeout function to run whenever the 'show' variable changes. How can I achieve this? When I tried invoking the link function, all the variables - show, message, and ty ...