How to convert a JSON object to Javascript array filtered by key?

Question

I'm returning a JSON object from an Ajax request which outputs the following keys and values:

[{"App_Name":"Maccy D's","ID":2017},{"App_Name":"B King","ID":2011}]

I need to convert this object to a Javascript array where each App_Name and ID value is concatenated as one string in the array. So for example:

['Maccy D's 2017', 'B King 2011'] // etc...

What I have tried is calling

var assetsArray = JSON.parse(assetJSON);

but when I bind the assetsArray to a list it shows [object Object] for each menu item. Instead of the intended App_Name + ID concatenation:

How can I convert a JSON object to Javascript array filtered by key?

This is how I bind the JSON returned to the menu list:

Ajax request:

    //call an Ajax GET for the asset name data
    $.ajax({
        url: asset_list_request_url,
        cache: false,
        success: function(assetJSON){
            bindAssetNamesMenu(assetJSON);
        }
    });

Mapping function:

    function bindAssetNamesMenu(assetJSON)
    {

        var assetsArray = JSON.parse(assetJSON);

        $.each(assetsArray, function(i)
        {
            var li = $('<li/>')
            .addClass('ui-menu-item')
            .attr('role', 'menuitem')
            .appendTo(assetMenu);


            var a = $('<a>')
                 .addClass('ui-all')
                 .appendTo(li);

            var input = $('<input/>')
                  .addClass('ui-all')
                  .attr('type', 'checkbox')
                  .appendTo(a);


            var span = $('<span>')
                  .text(assetsArray[i])
                  .appendTo(a);


        });

    }

Answer 1

You can use map() to get the array of objects in to an array of the format you require:

 var data = [{"App_Name":"Maccy D's","ID":2017},{"App_Name":"B King","ID":2011}] var arr = data.map(function(obj) { return obj.App_Name + ' ' + obj.ID; }) console.log(arr); 

Alternatively, you could just work with the array of objects as it is, like this:

$.ajax({
    url: asset_list_request_url,
    cache: false,
    dataType: 'json',
    success: bindAssetNamesMenu
});

function bindAssetNamesMenu(arr) {
    $.each(arr, function() {
        var $li = $('<li/>').addClass('ui-menu-item').attr('role', 'menuitem').appendTo(assetMenu);
        var $a = $('<a>').addClass('ui-all').appendTo($li);
        var $input = $('<input/>').addClass('ui-all').attr('type', 'checkbox').appendTo($a);
        var $span = $('<span>').text(this.App_Name + ' ' + this.ID).appendTo($a);
    });
}

Answer 2

1. you don't need var assetsArray = JSON.parse(assetJSON);
2. keep your names straight, not assetJSON and assetArray
3. you have to access the property of the array index, like assetJSON[i].App_Name

Then your code is working fine!

 var data = [{ "App_Name": "Maccy D's", "ID": 2017 }, { "App_Name": "B King", "ID": 2011 }]; var assetMenu = $("ul"); bindAssetNamesMenu(data); function bindAssetNamesMenu(assetJSON) { $.each(assetJSON, function(i) { var li = $('<li/>') .addClass('ui-menu-item') .attr('role', 'menuitem') .appendTo(assetMenu); var a = $('<a>') .addClass('ui-all') .appendTo(li); var input = $('<input/>') .addClass('ui-all') .attr('type', 'checkbox') .appendTo(a); var span = $('<span>') .text(assetJSON[i].ID + " - " + assetJSON[i].App_Name) .appendTo(a); }); } 

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

Answer 3

If you would like to code in the imperative style then you can always use for of loop such as;

 var data = [{"App_Name":"Maccy D's","ID":2017},{"App_Name":"B King","ID":2011}], datar = []; for (var object of data) datar.push(object.App_Name + " " + object.ID); console.log(datar); 

Answer 4

You can using jQuery.each function to loop through the json and concatenate the required strings using either concat property (javascript) or directly use + (concatenation operator)

var json = [{"App_Name":"Maccy D's","ID":2017},{"App_Name":"B King","ID":2011}];
var arr = [];
jQuery.each(json,function(){
    arr.push(this.App_Name.concat(this.ID))
});

console.log(arr); // This will display ["Maccy D's 2017", "B King 2011"]