Json data into javascript array

Question

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

Here is my javacript code. I want to push json object's all values with key as topic. But when I try to access test[i] (i be any integer within array length) I get an error "undefined" . What' am I msissing?

Here is my json object sample-

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

You might be accessing outside the async function that is why you are getting undefined — Ankit Agarwal
– Ankit Agarwal, Commented May 2, 2018 at 12:10
I am accessing it after the line where function ends. But if I access whole array instead of specific value then it's working fine — puranjay11m
– puranjay11m, Commented May 2, 2018 at 12:12
Learn to debug, print the values of data key value and test at each call to function. You will understand what is the problem. — Subir Kumar Sao
– Subir Kumar Sao, Commented May 2, 2018 at 12:17

Md Johirul Islam · Accepted Answer · 2018-05-02 12:18:12Z

1

See the following working code:

var data = [
        {
            "topic": "Books",
            "quantity": 3
        },
        {
            "topic": "Grossery",
            "quantity": 3
        },
        {
            "topic": "stationery",
            "quantity": 3
        },
        {
            "topic": "food",
            "quantity": 2
        },
        {
            "topic": "market items",
            "quantity": 3
        }
]
var test = [];
$.each(data,(i,v) => test.push(v.topic));
console.log(test);

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

answered May 2, 2018 at 12:18

Md Johirul Islam

5,1924 gold badges28 silver badges57 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

puranjay11m Over a year ago

I want to fetch the json data instead of creating a json object in javascript file

puranjay11m Over a year ago

Your code seems that you have created an object and copied the values itself

Md Johirul Islam Over a year ago

I am assuming you got correct data that you showed from your $.getJSON() call

ambiso · Accepted Answer · 2018-05-02 14:56:40Z

0

Your code seems to be working fine for me.

Are you accessing the data before the callback that you pass to getJson has been executed?

Here's an example that works if I serve it 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);
                });
                // only use test array after data has been loaded
                doWork();
            });
        });
        function doWork() {
            $('#output').text(
                test + ' ' + test[0]
            );
        }
        </script>
    </head>
    <body>
        <div id="output"></div>
    </body>
</html>

edited May 2, 2018 at 14:56

answered May 2, 2018 at 12:28

ambiso

6185 silver badges11 bronze badges

2 Comments

puranjay11m Over a year ago

Did you try to access the test array just before the script tag ends?

ambiso Over a year ago

No, the access happens inside the callback passed to getJSON. You can sequence your actions after the callback by wrapping them in a function and calling that function from the callback. I'll edit the answer.

Collectives™ on Stack Overflow

Json data into javascript array

2 Answers 2

3 Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related