Looping through an object to get specific values

Question

I have a following object mixed with objects and non objects.

{
  "boundingBox": "250,420,124,59",
  "lines": [
    {
      "boundingBox": "281,420,62,15",
      "words": [
        {
          "boundingBox": "281,420,62,15",
          "text": "BLACK"
        }
      ]
    },
    {
      "boundingBox": "250,441,124,16",
      "words": [
        {
          "boundingBox": "250,441,75,16",
          "text": "FOREST"
        },
        {
          "boundingBox": "331,441,43,16",
          "text": "HAM"
        }
      ]
    },
    {
      "boundingBox": "275,463,73,16",
      "words": [
        {
          "boundingBox": "275,464,53,15",
          "text": "290\/570"
        },
        {
          "boundingBox": "332,463,16,15",
          "text": "cal"
        }
      ]
    }
  ]
}

What I would like to achieve is to extract all the text values. So what's expected to be returned from above is: (black, forest, ham, 290/570, cal).

I've previously done this on a smaller object:

{
  "boundingBox": "275,463,73,16",
  "words": [
    {
     "boundingBox": "275,464,53,15",
     "text": "290\/570"
     },
     {
      "boundingBox": "332,463,16,15",
      "text": "cal"
     }
    ]
 }

And I was able to achieve (290/570,cal) with the following code.

for (x in jsonStruct) {
    $initialValue = "";
    if (typeof(jsonStruct[x]) == "object") {
        //var initialValue = traverseJSON(jsonStruct[x], initialValue);
        var wantedValue = jsonStruct[x];
        for (var i=0;i<wantedValue.length; i++){
            initialValue += wantedValue[i].text +",";
        }
    } else {
        initialValue += x + "->" + jsonStruct[x] + " / ";
    }
}
return initialValue;

However, in the bigger object listed above, I think that because some of the values are not an object, the code stop executing at the first one, which is not an object. The only response I got was boundingBox->250,420,124,59 / .

So how do I go about having a loop that loops through the entire object, return all the text values be it whether they are an object or not. Just so long they return all the text values?

Your help will be very much be apprecited! Thank you!

Answer 1

I believe this will do the job:

const obj = {
  "boundingBox": "250,420,124,59",
  "lines": [
    {
      "boundingBox": "281,420,62,15",
      "words": [
        {
          "boundingBox": "281,420,62,15",
          "text": "BLACK"
        }
      ]
    },
    {
      "boundingBox": "250,441,124,16",
      "words": [
        {
          "boundingBox": "250,441,75,16",
          "text": "FOREST"
        },
        {
          "boundingBox": "331,441,43,16",
          "text": "HAM"
        }
      ]
    },
    {
      "boundingBox": "275,463,73,16",
      "words": [
        {
          "boundingBox": "275,464,53,15",
          "text": "290\/570"
        },
        {
          "boundingBox": "332,463,16,15",
          "text": "cal"
        }
      ]
    }
  ]
}

const result = obj.lines.reduce(function(acc, line){
    line.words.forEach(function(word){
        acc.push(word.text));
    };
  return acc;
}, []);

//Or in arrow notation:
 const result = obj.lines.reduce((acc, line) => {
    line.words.forEach(word => acc.push(word.text));
  return acc;
}, []);

console.log(result);
// Prints out ["BLACK", "FOREST", "HAM", "290/570", "cal"]

I use the reduce function which allows you to iterate over an array and accumulate your desired results. Also notice the arrow notation syntax.

Hope this helps.