jquery function return json value in array

Question

I would make a jquery function that import a json value and return an array when we call it. I coded the following function but the returned array is empty.

The json file is very basic like this example :

{
"fruit": [ "babana", "pineapple", "apple" ],
"vegetable" :  [ "salad", "carrot", "tomato" ]
}

I call my json with the following function

$( function() {
var fruit = new Array();
var vegetable = new Array();
var food = new Array();

function loadJson(result) {
    $.getJSON('myfile.json', function (data) {
        fruit = data.fruit;
        vegetable = data.vegetable;
    })
    .error(function() {
        console.log('error: JSON not loaded');
    })
    .done(function() {
        //console.log( "JSON loaded!" );
        var food = fruit.concat(vegetable);
        return result;
    });
}

After I call this function in another function with

loadJson(food);   loadJson(fruit);

Can you help me?

Possible duplicate of [How do I return the response from an asynchronous call?](https://stackoverflow.com/questions/14220321/how-do-i-return-the-response-from-an-asynchronous-call) — Andreas, Mar 31 '18 at 09:11
i think you need to make var result = fruit.concat(vegetable); and then return result; — Kalleshwar Kalshetty, Mar 31 '18 at 09:17

James Glendenning · Accepted Answer · 2018-03-31T12:34:12.107

I think this is what you're looking for, I've fired mine on document ready just so I could test the function quickly, but you should give you the result you're after.

Answer Updated:

function loadJson( type ) {

var final_result = null;
    $.ajax({
        type: 'GET',
        url: "test.json",
        async: false,
        dataType: "json",
        success: function (data) {
            var fruit = data['fruit'],
                vegetable = data['vegetable'],
                food = fruit.concat(vegetable),
                result = food;

            switch( type ) {
                case 'fruit':
                    result = fruit;
                    break;
                case 'vegetable':
                    result = vegetable;
                    break;
                case 'food':
                    result = food;
                    break;
            }
            final_result = result;
        }
    });
    return final_result;
}


$( document ).ready(function() {
    loadJson( 'food' );
    loadJson( 'fruit' );
    loadJson( 'vegetable' );

    var test = loadJson( 'fruit' );
    console.log( test );
 });

Thanks you for you help. But if I add in document ready function `var test = loadJson( 'food' ); ` `console.log(test) ;` it's return undefined — julien c, Mar 31 '18 at 11:56

jquery function return json value in array

1 Answers1