How do I iterate over a JSON structure?

Iteration strategies: keys, values, and entries

Expanding our toolbox, modern JavaScript grants more efficient methods:

• Object.entries(): Extracts key-value pairs as arrays - perfect for a stroll with for...of loop:

const user = { name: "Alice", age: 25 };
// Say hello to Alice and acknowledge her youth!
for (const [key, value] of Object.entries(user)) {
  console.log(`${key}: ${value}`);
}


• Object.keys() and Object.values(): It's all about choices: keys or values:

// Only names! No values, no opinions.
Object.keys(user).forEach(key => console.log(key));

// What's the key? Doesn't matter. Show me the treasure! 
Object.values(user).forEach(value => console.log(value));


• JSON.parse and JSON.stringify: JSON strings and objects are free to change their identities:

// Spies in action. Code names, real names!
const jsonString = '{"name":"Alice","age":25}';
const jsonObject = JSON.parse(jsonString); // Code to real name
const backToString = JSON.stringify(jsonObject); // And back to code!


Choose the appropriate approach based on performance and readability requirements.

Traversing Nested Structures: Recursive and Stack-based approaches

Dealing with JSON housing nested objects or arrays? Fear not. Incarnate as a recursive function or a stack-based virtuoso:

Recursive approach

A recursive function transforms complication into elegance:

// Going down the rabbit hole, I hope it's not too deep!
function iterateJSON(json) {
  if (typeof json === 'object' && json !== null) {
    for (const key in json) {
      console.log(`Key: ${key}`);
      iterateJSON(json[key]); // Again, Alice! 
    }
  } else {
    console.log(`Value: ${json}`);
  }
}


Stack-based iteration

The other way out of the rabbit hole, stack-based approach, avoids possibility of performance issues:

// I've got my stack, no recursion, let's get to work!
function iterateJSONStack(json) {
  const stack = [json];
  while (stack.length) {
    const item = stack.pop();
    if (typeof item === 'object' && item !== null) {
      for (const k in item) {
        console.log(`Key: ${k}`);
        stack.push(item[k]);
      }
    } else {
      console.log(`Value: ${item}`);
    }
  }
}


Including jQuery in JSON operations

jQuery has got the charm - simplicity:

• jQuery.each(): Provides each data element some attention with a callback:

// jQuery, dear, show them to me, one by one.
$.each(jsonObj, (key, value) => {
  console.log(key, value);
});


• jQuery.parseJSON(): When JSON strings seem dubious:

// Trust issues with JSON strings? I've got you covered!
const jsonObject = $.parseJSON('{"name":"Alice","age":25}');


But remember, if jQuery is not a part of your project already, stick with native methods.

Debugging with JSON.stringify

Sometimes, bugs prefer quiet corners within complex structures. Visualizing an entire JSON enhances debugging. JSON.stringify() with formatting options is the unmasking tool:

// Caught you! No more hiding.
console.log(JSON.stringify(jsonObject, null, 2));


This pretty-prints the JSON with two-space indents for improved readability.