Trying to access string array, saying it's empty even though its full

Question

I'm having a problem when i'm trying to access the text that i have stored in a string array. I know, the problem seems so easy, but I just can't figure out where i'm going wrong...

So when i'm console logging the contents of the array to the browser, I can see that i get values as follows:

console.log(myStringArray)

output:
10[...]
 0: "a lot of text here"
 1: "also here"
 2: "and here... etc"
 ...

But when i'm trying to access the values like:

myStringArray[0];

The result i'm getting is a one slotted array with nothing in it like:

(1)[...]
 0: ""
 length: 1
 >_proto__: Array[]

Trying to convert the result into strings etc didnt work so well either. Could someone help me access these values, thanks!

Edit: The text that i'm getting is articles from wiki:s API.

  function getMoreText(){
   for(let j = 0; j < titlesInSearch.length; j++){
        textContent[j] = [''];

        textUrl = 'https://en.wikipedia.org/w/api.php?format=json&action=query&prop=extracts&exintro=&explaintext=&titles=' + titlesInSearch[j];

        $.getJSON({
            url: textUrl,
            dataType: "jsonp",
            success: function(data, status, xhr) {
                var page = data.query.pages;
                var pageId = Object.keys(page)[0];

                if(page[pageId].title == titlesInSearch[j]){

                    textContent[j] = page[pageId].extract;
                }

             }
     })

}
}

and when i'm console logging the values, when i'm going to update the HTML code, the result are as I explained above:

function updateGUI(){
//resetting when getting new articles
document.getElementById("artikel").innerHTML = '';

//getting the result
console.log(textContent);

//not getting anything
console.log(textContent[0]); 

for(let b = 0; b < titlesInSearch.length; b++)
{   
    console.log(textContent[b]);
    if(summary[b].includes("may refer to:")){
        console.log("filtered: 'may refer to'") //do nothing
    } 
    else if(summary[b] != ''){
        document.getElementById("artikel").innerHTML += ('<div>' + textContent[b] +'</div>');  

    }
}    

}

I guess you will need to post a real example. Right now it is too hard to tell exactly what is the problem — Luis felipe De jesus Munoz, Jun 05 '18 at 20:34
Please post the context. As we can only guess what the problem is, I'd say it's an async issue. — baao, Jun 05 '18 at 20:34
The console displays a dynamic value of sorts of your object, maybe your array is still getting filled while you are logging it. Please post a [mcve] of the function that fills your array — Luca Kiebel, Jun 05 '18 at 20:35
How `myStringArray` looks like in raw code, not in `console.log`? — The Reason, Jun 05 '18 at 20:36
Your call to `$.getJSON()` is wrong. It doesn't take an object with options, that's the way to call `$.ajax()`. — Barmar, Jun 05 '18 at 21:25
You need to call `updateGUI()` from the `$.getJSON()` callback function. — Barmar, Jun 05 '18 at 21:26
Thank you Barmar! Read about "Asynchronous code" (which i've never heard about before) and "understood" that it had to go there :) — Sandmountain, Jun 05 '18 at 22:09

undg · Answer 1 · 2018-06-05T22:26:05.620

First add to url &origin=* other way you will get error from wiki

Failed to load https://en.wikipedia.org/w/api.php?format=json&action=query&prop=extracts&exintro=&explaintext=&titles=java: No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'null' is therefore not allowed access. If an opaque response serves your needs, set the request's mode to 'no-cors' to fetch the resource with CORS disabled.

Secondly you need to wait for data before you get access to them. If you want to store them in textContent = [] array will by empty if you will read it before you finish connection with http://wiki.api and get response.

You can rewrite second function to work in place readData(singleContent) and work with one item at the time. This way you don't need to wait for every response from wiki.

This is in vanilla javascript, but in $.getJsons or $.ajax idea is the same.

/* jshint node: true */
//var fetch = require('node-fetch')
var titlesInSearch = ['java', 'linux']
var textContent = []

function getMoreText(){
  "use strict"
  titlesInSearch.forEach(function(searchItem){
    var url = 'https://en.wikipedia.org/w/api.php?format=json&action=query&prop=extracts&exintro=&explaintext=&origin=*&titles=' + searchItem
    return fetch(url)
      .then(function(response){
        return response.json()
      })
      .then(function(data) {
        var page = data.query.pages;
        var pageId = Object.keys(page)[0];

        var singleContent =''
        if (page[pageId].title.toUpperCase === searchItem.toUpperCase) {
          singleContent = page[pageId].extract
          textContent.push(singleContent.substring(0,50)) //short str
        }
        readData(singleContent)
      })
  })
} 
getMoreText()

function readData(singleContent){
  "use strict"
  // read data one by one
  console.log(singleContent)
  console.log('-----------------------------')
  console.log(textContent) // array 
}

Notice console.log('----------'), you will see interesting thing. While you getting single singleContent and how array textContent looks on every request(how many items it have).

This is a comment on the original post. Please remove this answer or edit it to provide an actual answer. — Ivan, Jun 05 '18 at 20:48

Trying to access string array, saying it's empty even though its full

1 Answers1