CODEWITHSUNDEEP
javascriptarraysjsonloopsnested
Jason Brown
Jason Brown

Reputation: 109

Get specific values from nested JSON response to make into string

I'm using Microsoft Azure Cognitive Services text recognition API in a JavaScript web app.

Upon successful extraction of text from an image, a response like this is given:


    {
      "language": "en",
      "textAngle": 0,
      "orientation": "Up",
      "regions": [
        {
          "boundingBox": "238,220,3547,2476",
          "lines": [
            {
              "boundingBox": "415,220,104,45",
              "words": [
                {
                  "boundingBox": "415,220,104,45",
                  "text": "096"
                }
              ]
            },
            {
              "boundingBox": "473,374,2854,202",
              "words": [
                {
                  "boundingBox": "473,418,1092,139",
                  "text": "Storehouse"
                },
                {
                  "boundingBox": "1635,410,149,142",
                  "text": "is"
                },
                {
                  "boundingBox": "1854,406,666,170",
                  "text": "always"
                },
                {
                  "boundingBox": "2596,374,731,183",
                  "text": "moving"
                }
              ]
            },
            {
              "boundingBox": "445,614,2744,200",
              "words": [
                {
                  "boundingBox": "445,641,788,173",
                  "text": "forward,"
                },
                {
                  "boundingBox": "1310,640,350,145",
                  "text": "and"
                },
                {
                  "boundingBox": "1739,668,400,113",
                  "text": "now"
                },
                {
                  "boundingBox": "2200,621,369,151",
                  "text": "this"
                },
                {
                  "boundingBox": "2647,614,542,147",
                  "text": "issue"
                }
              ]
            }
          ]
        }
      ]
    }

I'd like to be able to get the value of 'text' in each case to make a string, such as: 'Storehouse is always moving forward, and now this issue...

How do I go about doing this in JavaScript please? I think I'm getting confused attempting to access the nested 'text' values. Have tried for and for-of loops with no joy!

The API does parse the JSON response as a string using:

JSON.stringify(data, null, 2);

Where 'data' is the name of the JSON response. I understand this needs to then be parsed as an array before anything can be done, but after that I'm unsure.

I can use jQuery.

Cheers!

Upvotes: 0

Views: 40

Answers (1)

Dave Newton
Dave Newton

Reputation: 160261

An iterative, simplistic solution.

const tmp = {
  "language": "en",
  "textAngle": 0,
  "orientation": "Up",
  "regions": [
    {
      "boundingBox": "238,220,3547,2476",
      "lines": [
        {
          "boundingBox": "415,220,104,45",
          "words": [
            {
              "boundingBox": "415,220,104,45",
              "text": "096"
            }
          ]
        },
        {
          "boundingBox": "473,374,2854,202",
          "words": [
            {
              "boundingBox": "473,418,1092,139",
              "text": "Storehouse"
            },
            {
              "boundingBox": "1635,410,149,142",
              "text": "is"
            },
            {
              "boundingBox": "1854,406,666,170",
              "text": "always"
            },
            {
              "boundingBox": "2596,374,731,183",
              "text": "moving"
            }
          ]
        },
        {
          "boundingBox": "445,614,2744,200",
          "words": [
            {
              "boundingBox": "445,641,788,173",
              "text": "forward,"
            },
            {
              "boundingBox": "1310,640,350,145",
              "text": "and"
            },
            {
              "boundingBox": "1739,668,400,113",
              "text": "now"
            },
            {
              "boundingBox": "2200,621,369,151",
              "text": "this"
            },
            {
              "boundingBox": "2647,614,542,147",
              "text": "issue"
            }
          ]
        }
      ]
    }
  ]
}

const outputWords = []

tmp.regions.forEach(region => 
  region.lines.forEach(line => 
    line.words.forEach(word => 
      outputWords.push(word.text)
    )
  )
)

console.log(outputWords.join(' '))

Upvotes: 1

Related Questions