iterating through json object javascript

I'm having a really hard time trying to find a way to iterate through this JSON object in the way that I'd like. I'm using only Javascript here.

First, here's the object

{
"dialog":
{
    "dialog_trunk_1":{
        "message": "This is just a JSON Test"
    },

    "dialog_trunk_2":{
        "message": "and a test of the second message"
    },

    "dialog_trunk_3":
    {
        "message": "This is a test of a bit longer text. Hopefully this will at the very least create 3 lines and trigger us to go on to another box. So we can test multi-box functionality, too."
    }
}
}

Right now, I'm just trying basic ways to get through to each dialog_trunk on this object. I ideally want to loop through the object and for each trunk, display it's message value.

I've tried using a for loop to generate the name/number of the dialog_trunk on the fly, but I can't access the object using a string for the object name so I'm not sure where to go from here.

You use a for..in loop for this. Be sure to check if the object owns the properties or all inherited properties are shown as well. An example is like this:

var obj = {a: 1, b: 2};
for (var key in obj) {
  if (obj.hasOwnProperty(key)) {
    var val = obj[key];
    console.log(val);
  }
}

Or if you need recursion to walk through all the properties:

var obj = {a: 1, b: 2, c: {a: 1, b: 2}};
function walk(obj) {
  for (var key in obj) {
    if (obj.hasOwnProperty(key)) {
      var val = obj[key];
      console.log(val);
      walk(val);
    }
  }
}
walk(obj);

iterating through json object javascript, Why aren't you passing the corresponding object to JSON.stringify ? over 1 year ago �. Iterating through object keys and values in JavaScript. Sometimes you may need to iterate through an object in JavaScript to retrieve multiple key-value pairs. In this article, we will look at four different ways to looping over object properties in JavaScript. Before ES6, the only way to loop through an object was the forin loop.

My problem was actually a problem of bad planning with the JSON object rather than an actual logic issue. What I ended up doing was organize the object as follows, per a suggestion from user2736012.

{
"dialog":
{
    "trunks":[
    {
        "trunk_id" : "1",
        "message": "This is just a JSON Test"
    },
    {
        "trunk_id" : "2",
        "message": "This is a test of a bit longer text. Hopefully this will at the very least create 3 lines and trigger us to go on to another box. So we can test multi-box functionality, too."
    }
    ]
}
}

At that point, I was able to do a fairly simple for loop based on the total number of objects.

var totalMessages = Object.keys(messages.dialog.trunks).length;

    for ( var i = 0; i < totalMessages; i++)
    {
        console.log("ID: " + messages.dialog.trunks[i].trunk_id + " Message " + messages.dialog.trunks[i].message);
    }

My method for getting totalMessages is not supported in all browsers, though. For my project, it actually doesn't matter, but beware of that if you choose to use something similar to this.

JSON Objects, Typically, this is when you have a JSON object containing various information from an endpoint. Let's say you have an object like so: const json =� If you want to be able to iterate over all objects you can add it as a prototype of Object: Object.prototype[Symbol.iterator] = function*() { for(p of Reflect.ownKeys(this)){ yield this[p]; } } This would enable you to iterate over the values of an object with a forof loop, for example:

Here is my recursive approach:

function visit(object) {
    if (isIterable(object)) {
        forEachIn(object, function (accessor, child) {
            visit(child);
        });
    }
    else {
        var value = object;
        console.log(value);
    }
}

function forEachIn(iterable, functionRef) {
    for (var accessor in iterable) {
        functionRef(accessor, iterable[accessor]);
    }
}

function isIterable(element) {
    return isArray(element) || isObject(element);
}

function isArray(element) {
    return element.constructor == Array;
}

function isObject(element) {
    return element.constructor == Object;
}

JavaScript iterate through object keys and values (Example), Since methods like map and forEach doesn't exist for JSON Object with changed the title JSON object members and not array How to iterate through store.js: let normalized = normalize(action.data, arrayOf(product));� How to Iterate through JSONArray in JavaScript Last Updated on July 16th, 2017 by App Shah 2 comments Sometimes you have to handle some type of array (JSONArray, int Array, etc) at client side, i.e. in jsp or html file.

An improved version for recursive approach suggested by @schirrmacher to print key[value] for the entire object:

var jDepthLvl = 0;
function visit(object, objectAccessor=null) {
  jDepthLvl++;
  if (isIterable(object)) {
    if(objectAccessor === null) {
      console.log("%c ⇓ ⇓ printing object $OBJECT_OR_ARRAY$ -- START ⇓ ⇓", "background:yellow");
    } else
      console.log("%c"+spacesDepth(jDepthLvl)+objectAccessor+"%c:","color:purple;font-weight:bold", "color:black");
    forEachIn(object, function (accessor, child) {
      visit(child, accessor);
    });
  } else {
    var value = object;
    console.log("%c"
      + spacesDepth(jDepthLvl)
      + objectAccessor + "[%c" + value + "%c] "
      ,"color:blue","color:red","color:blue");
  }
  if(objectAccessor === null) {
    console.log("%c ⇑ ⇑ printing object $OBJECT_OR_ARRAY$ -- END ⇑ ⇑", "background:yellow");
  }
  jDepthLvl--;
}

function spacesDepth(jDepthLvl) {
  let jSpc="";
  for (let jIter=0; jIter<jDepthLvl-1; jIter++) {
    jSpc+="\u0020\u0020"
  }
  return jSpc;
}

function forEachIn(iterable, functionRef) {
  for (var accessor in iterable) {
    functionRef(accessor, iterable[accessor]);
  }
}

function isIterable(element) {
  return isArray(element) || isObject(element);
}

function isArray(element) {
  return element.constructor == Array;
}

function isObject(element) {
  return element.constructor == Object;
}


visit($OBJECT_OR_ARRAY$);

How to loop through JSON in JavaScript, JSON forEach tutorial shows how to loop over a JSON array in JavaScript. The json-server is a JavaScript library to create testing REST API. We go over the entries of each object and print the key and the value to the� This approach of looping through keys and values in an object can be used to perform more useful operations on the object, for instance the method could call a function passed in on each of the values. An example of this is in the foIn method in mout.js which iterates through the object keys and values calling the function passed in.

How to iterate through JSON Object with members? � Issue #15 , Sometimes you have to handle some type of array (JSONArray, int Array, etc) at client side, i.e. in jsp or html file. And you want to iterate this� If you want all of an object's properties, including non-enumerable inherited ones, you need to use a loop and Object.getPrototypeOf [MDN, spec] and use Object.getOwnPropertyNames, Object.getOwnPropertySymbols, or Reflect.ownKeys on each object in the prototype chain (example at the bottom of this answer).

JSON forEach tutorial, Possible to iterate through a JSON object and return values of each property? all keys of this somedata object, returned as an array Object.keys(somedata) // returns see it in action http://jsbin.com/laxerexife/edit?js,console. Once in a while, you may need to loop through Objects in JavaScript. The only way to do so before ES6 is with a forin loop. The problem with a forin loop is that it iterates through properties in the Prototype chain. When you loop through an object with the forin loop, you need to check if the property belongs to the object.

How to Iterate through JSONArray in JavaScript • Crunchify, Get code examples like "loop through json object javascript" instantly right from your google search results with the Grepper Chrome Extension. So you can iterate over the Object and have key and value for each of the object and get something like this. const anObj = { 100: 'a', 2: 'b', 7: 'c' }; Object.entries(anObj).map(obj => { const key = obj[0]; const value = obj[1]; // do whatever you want with those values.

Comments
  • You need a for..in loop
  • possible duplicate of Access / process (nested) objects, arrays or JSON
  • If possible, you should change your structure to use an ordered list. There's little sense in using a named key with an incrementing index. {"dialog":{"trunks":[{"message":"..."},{"message":"..."}]}}
  • If it's JSON, have you parsed it?
  • @dcp You're so useful, thank you. Perhaps next time I'll try to include that I couldn't find something similar enough to my own structure that I could figure out the proper way to go through. It's a shame that has to be explicitly stated these days.
  • for..in is in the ECMAScript 1.0 specification. Even Internet Explorer 5 supports it.. (Source: developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/…)
  • this is nicely done! works verry well! How to add the key as string in front of the value like: key:value?