Traverse through the keys and values of a JSON object using JavaScript

Question

Traverse through the keys and values of a JSON object using JavaScript

I have a json string that needs to be parsed in a specific way. The structure of the json is as follows:

{ "a": [{
    "b": [
        ["c"],
        []
    ], "d": [
        [],
        []
    ], "e": [
        [],
        ["f"]
    ], "g": [
        [],
        ["h", "i"]
    ]
}] }

My current code for parsing and iterating through the keys and values is not giving me the desired output. I am getting some unexpected numbers as keys, which are likely the index numbers of empty values. How can I modify this pure javascript code to only get "a,b,c,d,e,f,g,h,i" as keys and their respective values?

var jsonData = JSON.parse("name");
for (var key in jsonData) {
  if (jsonData.hasOwnProperty(key)) {
    // do stuff
  }
}

javascript json

Answer 1

Answer №1

Here is a methodical approach to navigating the data structure. Whenever the input is an array, it will go through each element consecutively; when the input is an object, it will display each key and then delve into its corresponding value; otherwise, it will simply present the string representation of the input.

let info = { "a": [{
    "b": [
        ["c"],
        []
    ], "d": [
        [],
        []
    ], "e": [
        [],
        ["f"]
    ], "g": [
        [],
        ["h", "i"]
    ]
}] };

function explore(input) {
  if (Array.isArray(input)) {
    input.map(explore);
  } else if (typeof input === 'object') {
    Object.keys(input).forEach(key => {
      console.log(key);
      explore(input[key]);
    });
  } else {
    console.log(input);
  }
}

explore(info);

Answer 2

Here is a methodical approach to navigating the data structure. Whenever the input is an array, it will go through each element consecutively; when the input is an object, it will display each key and then delve into its corresponding value; otherwise, it will simply present the string representation of the input.

let info = { "a": [{
    "b": [
        ["c"],
        []
    ], "d": [
        [],
        []
    ], "e": [
        [],
        ["f"]
    ], "g": [
        [],
        ["h", "i"]
    ]
}] };

function explore(input) {
  if (Array.isArray(input)) {
    input.map(explore);
  } else if (typeof input === 'object') {
    Object.keys(input).forEach(key => {
      console.log(key);
      explore(input[key]);
    });
  } else {
    console.log(input);
  }
}

explore(info);

Answer 3

Answer №2

To find a solution similar to the one given, you may consider using a regular expression on the JSON data:

const jsonData = {
  "x": [{
    "y": [
      ["z"],
      []
    ],
    "m": [
      [],
      []
    ],
    "n": [
      [],
      ["o"]
    ],
    "p": [
      [],
      ["q", "r"]
    ]
  }]
};

const result = JSON.stringify(jsonData).match(/\w+/g);
console.log(result.join())

Answer 4

To find a solution similar to the one given, you may consider using a regular expression on the JSON data:

const jsonData = {
  "x": [{
    "y": [
      ["z"],
      []
    ],
    "m": [
      [],
      []
    ],
    "n": [
      [],
      ["o"]
    ],
    "p": [
      [],
      ["q", "r"]
    ]
  }]
};

const result = JSON.stringify(jsonData).match(/\w+/g);
console.log(result.join())

Traverse through the keys and values of a JSON object using JavaScript

Answer №1

Answer №2

Similar questions

Is there a simple method to submit to a URL without relying on ajax?

Javascript: Issue encountered while the page was loading

Is it possible to execute a standalone .js file using Node.js and Express?

Tips for retrieving a local variable from inside a callback and using it outside the function

Enumerating items in a JSON dataset

Leverage videojs-vr within a Vue.js component

React.js - Error message: onChange is not defined

streaming audio data from a MongoDB database to an HTML audio element

splitting xmlhttp.responsetext using loops

Instead of presenting MySQL data in tables on an HTML page, showcase it in editable text boxes

Charting data with missing values in Google Charts

Message display showing an "[object Object]" (Node Express Passport)

How to Enhance GraphQL Mutation OutputFields with a Function Generator

Node.js retrieves a single row from a JSON array with two dimensions

What is the best way to implement debouncing for an editor value that is controlled by the parent component?

Utilizing the output from a console.log in a webpage

When attempting to add objects to an indexedDB object store, an InvalidStateError is encountered

Are the JQuery appended elements exceeding the width of the parent div?

Another option for authorizing a document

What is the best way to prevent Firefox from storing the data of a textarea in the local environment?