Getting data from JSON to fill an array: A step-by-step guide

Question

Getting data from JSON to fill an array: A step-by-step guide

I am currently facing an issue where I am trying to incorporate data from a JSON file into my array, but for some reason, the information is returning as 'undefined' because nothing is being created in my array. Below are the contents of the JSON file:

   "histogram": [ 
      {  
         "type": "Comedy",
         "count": 4
      },
      {  
         "type": "Action",
         "count": 5
      },
      {  
         "type": "Romance",
         "count": 6
      },
      {  
         "type": "Drama",
         "count": 1
      },
      {  
         "type": "SciFi",
         "count": 4
      }
   ]
}

The current code that I have been utilizing involves using the push() function to add information, however, it doesn't seem to be functioning correctly at the moment. Here is the snippet of the code in question:

let movies;
function preload() {
movies = loadJSON('movies.json');
}

count = [];

var c0 = movies.histogram[0].count;
count.push(c0);

I would greatly appreciate any assistance or guidance with this matter. Thank you!

javascript arrays json

Answer 1

Answer №1

To ensure that the variable movies is filled with data, you must first invoke the function preload:

count = [];
preload();

It is important to note that the function loadJSON likely operates asynchronously. Therefore, you should adjust your code as follows:

async function preload() {
  let data = await loadJSON("films.json");
  movies = data;
}

count = [];
(async () => {
  preload();
  var c0 = movies.histogram[0].count;
  count.push(c0);
})();

The use of an async IIFE simplifies the process of executing asynchronous functions correctly.

Answer 2

To ensure that the variable movies is filled with data, you must first invoke the function preload:

count = [];
preload();

It is important to note that the function loadJSON likely operates asynchronously. Therefore, you should adjust your code as follows:

async function preload() {
  let data = await loadJSON("films.json");
  movies = data;
}

count = [];
(async () => {
  preload();
  var c0 = movies.histogram[0].count;
  count.push(c0);
})();

The use of an async IIFE simplifies the process of executing asynchronous functions correctly.

Getting data from JSON to fill an array: A step-by-step guide

Answer №1

Similar questions

Is there a way to connect and interact with a different ng-controller's ng-model within a separate ng-controller?

Updating the JSON data with a new row

Is there a specific side effect that warrants creating a new Subscription?

Data binding in Vue does not function properly within functional components

Utilizing NSURLConnection's Delegate Methods

Installing npm modules can be a time-consuming task when running docker-compose

Error message "TypeError: onClick is not a function" occurs when attempting to use a prop in a functional component

The final condition of the ternary operator fails to render if the specified condition is satisfied

Retrieve only the items from a JavaScript array where the index is below a specified value

Dynamically extracting elements from a JSON dataset

Error message: "jQuery is not defined and occurs exclusively in Chrome."

Saving, displaying, and removing a JSON document

Is there a way to link my mapDispatchToProps with an onClick property in React?

Loop through different JSON objects with unique values using ng-repeat

What is the best way to add Vue dependency using CDN?

Guide to retrieving and showing specific items from a DropDownList in a Text box using JavaScript, HTML, and AngularJS

Removing a specific object from an array in Node.js

Instruct npm to remove dependencies that are no longer necessary

The functionality of Jquery-chosen appears to be malfunctioning when applied to a select element

Step-by-step guide on printing barcode labels from a browser in ReactJS with the Wincode C342C printer