I'm encountering an issue where the array is coming back empty after adding elements from JSON. Any tips on how to fix

Question

I'm encountering an issue where the array is coming back empty after adding elements from JSON. Any tips on how to fix

I am currently working with a .JSON file where I have read the data and implemented a for...in loop to iterate through it.

After using console.log, I noticed that while I can view the data in the console, I am unable to add any data to an array using the push function. When I try to log the array, it appears empty.

My main question is: how can I successfully add the data to the array?

Below is the code snippet:

let wordList = []

fetch("wordleanswers.json")
    .then(response =>response.json())
    .then(data=>{
        let myWord = data.toString()

        for (const singleData in data){
            wordList.push(singleData)
        }
    })

console.log(wordList)

I'm wondering if there is something crucial that I might be overlooking?

EDIT: In case it helps, here is a .txt version of the .json file containing the text within an object: https://github.com/MissingFable/wordle_bot_4_python/blob/main/wordleanswers.TXT

javascript arrays json

Answer 1

Answer №1

Utilize asynchronous code to retrieve the data. Make sure to await the fetch request before outputting your array.

Consider using then at the end as shown below.

let wordList = []

fetch("wordleanswers.json")
    .then(response =>response.json())
    .then(data=>{
        let myWord = data.toString()

        for (const singleData in data){
            wordList.push(singleData)
        }
    }).then(() => {
      console.log(wordList)
    })

Alternatively, encapsulate the code within an async function and use await before calling the fetch function.

Edit: Including another solution using IIFE function

(async () => {
  let wordList = []

  const response = await fetch("wordleanswers.json")
  const data = await response.json()
    

  for (const singleData in data){
     wordList.push(singleData)
  }

  console.log(wordList)

})()

Answer 2

Utilize asynchronous code to retrieve the data. Make sure to await the fetch request before outputting your array.

Consider using then at the end as shown below.

let wordList = []

fetch("wordleanswers.json")
    .then(response =>response.json())
    .then(data=>{
        let myWord = data.toString()

        for (const singleData in data){
            wordList.push(singleData)
        }
    }).then(() => {
      console.log(wordList)
    })

Alternatively, encapsulate the code within an async function and use await before calling the fetch function.

Edit: Including another solution using IIFE function

(async () => {
  let wordList = []

  const response = await fetch("wordleanswers.json")
  const data = await response.json()
    

  for (const singleData in data){
     wordList.push(singleData)
  }

  console.log(wordList)

})()

I'm encountering an issue where the array is coming back empty after adding elements from JSON. Any tips on how to fix

Answer №1

Similar questions

Executing JavaScript in Page Object Model

Initiating iOS UIWebView when the DOM is fully loaded

Checking for empty inputs using Html, JavaScript, and CSS

Is it common to have numerous operations in a single controller in AngularJS?

Attempting to create a fixed-length file parser from scratch

"Troubleshooting: Why is my JSON feed returning null with jQuery getJSON

How to return a variable to Express when clicking a button?

Exploring extensive arrays using numpy

JQuery causes Bootstrap carousel to malfunction after dynamically adding attribute to img tag

Shifting Hues: The Liquid Rainbow Transformation

Restrict the size of AJAX response

Unsuccessful CORS on whateverorigin.org with YQL

Regular expressions can be used to extract specific attributes and inner content from a div element within a contentEditable container

Sharing a controller between directives in AngularJS

I wonder if there is a method to verify whether pipelining is activated in PHP or JavaScript?

Strange flickering/visualization issue experienced with transparent MeshPhongMaterial in Three.JS

scala handling missing fields during JSON serialization in json4s

Ways to dynamically assign a name to a div using AngularJS

What method does Node.js use to determine if the initial parameter in a callback function is designated as an error handler?

I have a JSON object with a nested "src" value that I want to display on my webpage using Vue. How can I target and select this specific value?