# How to extract value from an array of multiple JSON urls?

**URL:** <https://discourse.processing.org/t/how-to-extract-value-from-an-array-of-multiple-json-urls/41398>\
**Category:** Libraries\
**Created:** [March 21, 2023, 8:28pm UTC](https://discourse.processing.org/t/how-to-extract-value-from-an-array-of-multiple-json-urls/41398 "2023-03-21T20:28:46Z")\
**Posts on this page:** 14\
**Page:** 1

<div class="post-metadata">

**Author:** ![nitrocaphane](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/nitrocaphane/32/16885_2.png) [@nitrocaphane](https://discourse.processing.org/u/nitrocaphane)\
**Post date:** [March 21, 2023, 8:28pm UTC](https://discourse.processing.org/t/how-to-extract-value-from-an-array-of-multiple-json-urls/41398/1 "2023-03-21T20:28:46Z")

</div>

Hi, I’m trying to write a sketch that replaces all the nouns in the user input content with the dictionary definition of the noun.

I’m using RiTa.js to detect the nouns (that part is successful), and Wordnik API for the definitions.  
For each noun detected, I created a url that links to the Wordnik JSON file in relation to the noun, and I put all the nouns in _nounArray_, all the urls in _urlArray_–both of which print correctly in the console so far.

Now the question is: how can I extract the [1].text value in each of the JSON files, and put them into the _definitionArray_?  
An example of the Wordnik JSON file:

 ![](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/3X/e/1/e125848ae807e58aa1f267e8874c6da55e7cbe65.png)

Here’s my dysfunctional code which won’t print the _definitionArray_:  
This line needs to be added into the index.html part:

```auto
<script src="https://unpkg.com/rita@2.8.31/dist/rita.js"></script>

```

Then in the sketch:

```auto
var input;
var button;
var api1 = 'https://api.wordnik.com/v4/word.json/';
var api2 = '/definitions?limit=200&includeRelated=true&useCanonical=false&includeTags=false&api_key=wmw2c7bi8zih4peeugrgr595b02vem2h1y5jkvm29ghohhpuk';
var dictionary;
let nounArray = []
let urlArray = []
let definitionArray = []

function setup() {
    opts = {
        ignoreCase: true,
        ignoreStopWords: true
    };
    noCanvas;
    input = createInput("There is a tree in front of my house");
    button = createButton("submit");
    input.changed(processRita);
    button.mousePressed(processRita);
    input.size(300);
}

function processRita() {
    var s = input.value();
    var words = RiTa.tokens(s);
    var pos = RiTa.pos(s);
    console.log(words);
    console.log(pos);

    var output = '';

    for (var i = 0; i < words.length; i++) {
        if (/nn.*/.test(pos[i])) {
            nounArray.push(words[i]);
            urlArray.push(api1 + words[i] + api2);
            console.log('nouns: ', nounArray);
            console.log('urls: ', urlArray);
            // up until this point, nounArray and urlArray print out correctly

            definitionArray = [];
            getDefinition();

            function getDefinition() {
                for (var i = 0; i < urlArray.length; i++) {
                    loadJSON(urlArray[i], gotData);
                }
            }

            function gotData(data) {
                definitionArray.push(data[1].text);
            }
            console.log('definitions: ', definitionArray);

            output += definitionArray[i];
        } else {
            output += words[i];
        }
        output += " ";
    }
    createP(output);
}

```

---

<div class="post-metadata">

**Author:** ![Chrisir](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/chrisir/32/45_2.png) [@Chrisir](https://discourse.processing.org/u/Chrisir)\
**Post date:** [March 21, 2023, 8:40pm UTC](https://discourse.processing.org/t/how-to-extract-value-from-an-array-of-multiple-json-urls/41398/3 "2023-03-21T20:40:04Z")

</div>

```
  function getDefinition() {

```

and

```
  function gotData(data) {

```

are INSIDE of function processRita () {

is this intentional?

* * *

**Remark 1**

(related)

use menu Edit | Tidy to get better indents that show you this

(I don’t know the language, so it’s just a remark, maybe it’s valid to place a function inside a function)

* * *

**Remark 2**

I can’t run your code, it says Rita is not defined.

* * *

**Remark 3**

from your screenshot (which is too short) you can maybe use the ID and modify it to get from the text JSON object (the first section) to the 2nd section

OR when it’s just an array, go to next element and retrieve text from there?

to get real help please post your screenshot as text and longer

---

<div class="post-metadata">

**Author:** ![GoToLoop](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/gotoloop/32/86_2.png) [@GoToLoop](https://discourse.processing.org/u/GoToLoop)\
**Post date:** [March 21, 2023, 9:42pm UTC](https://discourse.processing.org/t/how-to-extract-value-from-an-array-of-multiple-json-urls/41398/4 "2023-03-21T21:42:28Z")

</div>

Your posted sketch code is lacking proper indentation.

You can use a code “beautifier” like this 1:  
[https://Beautifier.io](https://Beautifier.io)

This is JSON array for “tree”:

```json
[
  {
    "id": "T5367300-1",
    "partOfSpeech": "noun",
    "attributionText": "from The American Heritage® Dictionary of the English Language, 5th Edition.",
    "sourceDictionary": "ahd-5",
    "sequence": "1",
    "score": 0,
    "word": "tree",
    "attributionUrl": "https://ahdictionary.com/",
    "wordnikUrl": "https://www.wordnik.com/words/tree",
    "citations": [],
    "exampleUses": [],
    "labels": [],
    "notes": [],
    "relatedWords": [],
    "textProns": []
  },
  {
    "id": "T5367300-2",
    "partOfSpeech": "noun",
    "attributionText": "from The American Heritage® Dictionary of the English Language, 5th Edition.",
    "sourceDictionary": "ahd-5",
    "text": "A perennial woody plant having a main trunk and usually a distinct crown.",
    "sequence": "2",
    "score": 0,
    "word": "tree",
    "attributionUrl": "https://ahdictionary.com/",
    "wordnikUrl": "https://www.wordnik.com/words/tree",
    "citations": [],
    "exampleUses": [],
    "labels": [],
    "notes": [],
    "relatedWords": [],
    "textProns": []
  }
]

```

---

<div class="post-metadata">

**Author:** ![nitrocaphane](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/nitrocaphane/32/16885_2.png) [@nitrocaphane](https://discourse.processing.org/u/nitrocaphane)\
**Post date:** [March 21, 2023, 9:46pm UTC](https://discourse.processing.org/t/how-to-extract-value-from-an-array-of-multiple-json-urls/41398/5 "2023-03-21T21:46:45Z")

</div>

Hi, thanks for the reply.  
This line needs to be added into the index.html part:

```auto
<script src="https://unpkg.com/rita@2.8.31/dist/rita.js"></script>

```

I have a sketch that does work with the Wordnik API & RiTa.js:

> **[p5.js Web Editor](https://editor.p5js.org/nitrocaphane/sketches/OQfqJI-Pw)**
>
> A web editor for p5.js, a JavaScript library with the goal of making coding accessible to artists, designers, educators, and beginners.

The _function gotData(data)_ is inside the _function processRita_ and it works so maybe we can ignore that for now.  
The problem with the initial sketch is that it only recognizes one definition, so I created the second sketch adding some arrays in case there are multiple nouns, which is the content in my original post.  
and here is the full sketch, the complete JSON file can be found in the urls printed in the console:

> **[p5.js Web Editor](https://editor.p5js.org/nitrocaphane/sketches/5HmqM-5t5)**
>
> A web editor for p5.js, a JavaScript library with the goal of making coding accessible to artists, designers, educators, and beginners.

---

<div class="post-metadata">

**Author:** ![nitrocaphane](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/nitrocaphane/32/16885_2.png) [@nitrocaphane](https://discourse.processing.org/u/nitrocaphane)\
**Post date:** [March 21, 2023, 9:50pm UTC](https://discourse.processing.org/t/how-to-extract-value-from-an-array-of-multiple-json-urls/41398/6 "2023-03-21T21:50:53Z")

</div>

Thanks, I updated the code with [https://beautifier.io](https://beautifier.io)  
I use a JSON formatter on Chrome.

---

<div class="post-metadata">

**Author:** ![Chrisir](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/chrisir/32/45_2.png) [@Chrisir](https://discourse.processing.org/u/Chrisir)\
**Post date:** [March 21, 2023, 10:32pm UTC](https://discourse.processing.org/t/how-to-extract-value-from-an-array-of-multiple-json-urls/41398/7 "2023-03-21T22:32:04Z")

</div>

> [@nitrocaphane](#):
>
> I have a sketch that does work with the Wordnik API & RiTa.js:

doesn’t work for me, says dict undefined

or do you have another version?

---

<div class="post-metadata">

**Author:** ![nitrocaphane](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/nitrocaphane/32/16885_2.png) [@nitrocaphane](https://discourse.processing.org/u/nitrocaphane)\
**Post date:** [March 21, 2023, 10:39pm UTC](https://discourse.processing.org/t/how-to-extract-value-from-an-array-of-multiple-json-urls/41398/8 "2023-03-21T22:39:34Z")

</div>

Yeah the second link would say undefined, and not printing out anything in the definitionArray–which is the one I’m asking for help on.  
The first link works if there’s only one noun (might need to click the button more than once)  
I’m posting the first link again here:

> **[p5.js Web Editor](https://editor.p5js.org/nitrocaphane/sketches/OQfqJI-Pw)**
>
> A web editor for p5.js, a JavaScript library with the goal of making coding accessible to artists, designers, educators, and beginners.

---

<div class="post-metadata">

**Author:** ![GoToLoop](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/gotoloop/32/86_2.png) [@GoToLoop](https://discourse.processing.org/u/GoToLoop)\
**Post date:** [March 21, 2023, 10:45pm UTC](https://discourse.processing.org/t/how-to-extract-value-from-an-array-of-multiple-json-urls/41398/9 "2023-03-21T22:45:17Z")

</div>

> [@nitrocaphane](#):
>
> This line needs to be added into the “index.html” part:
> 
> ```auto
> <script src="https://unpkg.com/rita@2.8.31/dist/rita.js"></script>
> 
> ```

Just `<script src=https://Unpkg.com/rita></script>` is enough for grabbing library [RiTa.js](https://rednoise.org/rita/).

> [@nitrocaphane](#):
>
> ```auto
> definitionArray = [];
> getDefinition();
> 
> function getDefinition() {
> for (var i = 0; i < urlArray.length; i++) {
> loadJSON(urlArray[i], gotData);
> }
> }
> 
> function gotData(data) {
> definitionArray.push(data[1].text);
> }
> console.log('definitions: ', definitionArray);
> 
> output += definitionArray[i];
> 
> ```

The last statement `output += definitionArray[i];` is attempting to read from array _definitionArray[]_ before it’s fully populated by [**loadJSON()**](https://p5js.org/reference/#/p5/loadJSON) + **gotData()**!

We should never immediately access data that’s asynchronously acquired.

---

<div class="post-metadata">

**Author:** ![nitrocaphane](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/nitrocaphane/32/16885_2.png) [@nitrocaphane](https://discourse.processing.org/u/nitrocaphane)\
**Post date:** [March 21, 2023, 11:28pm UTC](https://discourse.processing.org/t/how-to-extract-value-from-an-array-of-multiple-json-urls/41398/10 "2023-03-21T23:28:01Z")

</div>

Hmmm the reason I didn’t write loadJSON() in the preload was that before there are urls in the urlArray, there’s no link to JSON files to be loaded, and all of those are determined by the nouns in the content that would be changing in real time depending on user input 🤔

---

<div class="post-metadata">

**Author:** ![Chrisir](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/chrisir/32/45_2.png) [@Chrisir](https://discourse.processing.org/u/Chrisir)\
**Post date:** [March 21, 2023, 11:31pm UTC](https://discourse.processing.org/t/how-to-extract-value-from-an-array-of-multiple-json-urls/41398/11 "2023-03-21T23:31:56Z")

</div>

> [@GoToLoop](#):
>
> We should never immediately access data that’s asynchronously acquired.

@GoToLoop How can we wait until it’s loaded?

At OP: try to fix and clean up your 1st code so that it works with  
multiple words and on the first mouse click

---

<div class="post-metadata">

**Author:** ![nitrocaphane](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/nitrocaphane/32/16885_2.png) [@nitrocaphane](https://discourse.processing.org/u/nitrocaphane)\
**Post date:** [March 21, 2023, 11:39pm UTC](https://discourse.processing.org/t/how-to-extract-value-from-an-array-of-multiple-json-urls/41398/12 "2023-03-21T23:39:34Z")

</div>

😂 The 2nd sketch was my attempt to fix the 1st one, by putting everything in arrays in case there are multiple of them, and I’m stuck at not being able to extract all the [1].text in those JSON files.

---

<div class="post-metadata">

**Author:** ![Chrisir](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/chrisir/32/45_2.png) [@Chrisir](https://discourse.processing.org/u/Chrisir)\
**Post date:** [March 21, 2023, 11:41pm UTC](https://discourse.processing.org/t/how-to-extract-value-from-an-array-of-multiple-json-urls/41398/13 "2023-03-21T23:41:11Z")

</div>

Maybe repair the 1st and stick to one definition

---

<div class="post-metadata">

**Author:** ![Chrisir](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/chrisir/32/45_2.png) [@Chrisir](https://discourse.processing.org/u/Chrisir)\
**Post date:** [March 21, 2023, 11:57pm UTC](https://discourse.processing.org/t/how-to-extract-value-from-an-array-of-multiple-json-urls/41398/14 "2023-03-21T23:57:53Z")

</div>

And please no function within function

---

<div class="post-metadata">

**Author:** ![GoToLoop](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/gotoloop/32/86_2.png) [@GoToLoop](https://discourse.processing.org/u/GoToLoop)\
**Post date:** [March 22, 2023, 5:18am UTC](https://discourse.processing.org/t/how-to-extract-value-from-an-array-of-multiple-json-urls/41398/15 "2023-03-22T05:18:58Z")

</div>

This is my [attempt](https://OpenProcessing.org/sketch/1875469) for your sketch:

https://OpenProcessing.org/sketch/1875469/embed/

Basically I’ve declared a global variable _loads_, which keeps the current number of active **loadJSON()**.

When _loads_ is decreased back to 0, via callback **decreaseCounter()**, function **generateOutput()** is called back.