Converting JSON information into a JavaScript array

Question

Converting JSON information into a JavaScript array

var test=[];
$(document).ready(function(){
            $.getJSON("data.json",function(data){
                $.each(data,function(key,value){
                    test.push(value.topic);
                });
            });
        });

I have written some javascript code to push all values of a json object with the key as topic into an array called test. However, when I try to access test[i] (where i is any integer within the array length), I receive an error saying "undefined". Can you help me figure out what I am missing?

Below is a sample of my json object:

[
        {
            "topic": "Books",
            "quantity": 3
        },
        {
            "topic": "Grossery",
            "quantity": 3
        },
        {
            "topic": "stationery",
            "quantity": 3
        },
        {
            "topic": "food",
            "quantity": 2
        },
        {
            "topic": "market items",
            "quantity": 3
        }
]

javascript arrays json

Answer 1

Answer №1

Check out this functional code example:

var items = [
        {
            "type": "Shoes",
            "quantity": 5
        },
        {
            "type": "Hats",
            "quantity": 2
        },
        {
            "type": "Gloves",
            "quantity": 3
        },
        {
            "type": "Socks",
            "quantity": 4
        },
        {
            "type": "Scarves",
            "quantity": 1
        }
]
var itemList = [];
$.each(items, (i, v) => itemList.push(v.type));
console.log(itemList);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>

Answer 2

Check out this functional code example:

var items = [
        {
            "type": "Shoes",
            "quantity": 5
        },
        {
            "type": "Hats",
            "quantity": 2
        },
        {
            "type": "Gloves",
            "quantity": 3
        },
        {
            "type": "Socks",
            "quantity": 4
        },
        {
            "type": "Scarves",
            "quantity": 1
        }
]
var itemList = [];
$.each(items, (i, v) => itemList.push(v.type));
console.log(itemList);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>

Answer 3

Answer №2

It seems like your code is functioning correctly based on my testing.

Have you made sure not to access the data before the callback function you provide to getJson is executed?

Below is an example that runs successfully when served locally using python3 -m http.server 8080:

<html>
    <head>
        <script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
        <script>
            var test=[];
            $(document).ready(function(){
            $.getJSON("data.json",function(data){
                $.each(data,function(key,value){
                    test.push(value.topic);
                });
                // Make sure to only use the test array after the data has loaded
                doWork();
            });
        });
        function doWork() {
            $('#output').text(
                test + ' ' + test[0]
            );
        }
        </script>
    </head>
    <body>
        <div id="output"></div>
    </body>
</html>

Answer 4

It seems like your code is functioning correctly based on my testing.

Have you made sure not to access the data before the callback function you provide to getJson is executed?

Below is an example that runs successfully when served locally using python3 -m http.server 8080:

<html>
    <head>
        <script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
        <script>
            var test=[];
            $(document).ready(function(){
            $.getJSON("data.json",function(data){
                $.each(data,function(key,value){
                    test.push(value.topic);
                });
                // Make sure to only use the test array after the data has loaded
                doWork();
            });
        });
        function doWork() {
            $('#output').text(
                test + ' ' + test[0]
            );
        }
        </script>
    </head>
    <body>
        <div id="output"></div>
    </body>
</html>

Converting JSON information into a JavaScript array

Answer №1

Answer №2

Similar questions

Changing the size of an iframe and closing it by pressing the ESC

Tips for validating updates in MongooseEnsuring data integrity is

Updating MongoDB collections in Mongoose with varying numbers of fields: A step-by-step guide

Error encountered: The Jquery-ui functionality ceases to operate upon the completion of content

I need help with a process to extract information from a database and convert it into an object specifically for my situation

The initialization process removes the 'const' qualifier from the target type of the pointer

Mapping JSONP responses for jQuery UI autocomplete

Can an older style class be inherited from an ECMAScript 6 class in JavaScript?

Jasmine and Karma encountered a TypeError stating that the function this.role.toLowerCase is not valid

Deactivate PyV8's automatic garbage collection functionality

The elusive Ajax seems to be slipping through our grasp,

What is a method for saving a file from Chrome to a network drive using scripting language, even though it's currently functioning in IE?

Exploring the variance in outcomes when directly accessing an AuthService state versus utilizing a function in a React AuthContext

Every time I attempt to add data to the database, I am encountering the issue of receiving 'undefined' values for every row

Utilize Node JS to assign variables to HTML form inputs

Unable to perform updates for personalized fonts

Steps for connecting an external .otf file in p5.js

Tips on accessing the v-model value with a parameter in VUE

Coordinating Angular to communicate with Node.js to send and receive data

Creating new Vue components is happening towards the end of the loop