Question

我从Ajax请求返回一个JSON对象，该请求输出以下键和值：

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

我需要将此对象转换为Javascript数组，其中每个App_Name和ID值连接为数组中的一个字符串。例如：

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

我试过的是打电话

var assetsArray = JSON.parse(assetJSON);

但是当我将assetsArray绑定到列表时，它会为每个菜单项显示[object Object]。而不是预期的App_Name + ID串联：

如何将JSON对象转换为按密钥过滤的Javascript数组？

这是我将返回到菜单列表的JSON绑定的方式：

Ajax请求：

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

映射功能：

    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

您可以使用map()将对象数组转换为所需格式的数组：

＆＃13;

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);

＆＃13;

或者，您可以按原样使用对象数组，如下所示：

$.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

您不需要var assetsArray = JSON.parse(assetJSON);
保持您的姓名，而不是assetJSON和assetArray
您必须访问数组索引的属性，例如assetJSON[i].App_Name

然后你的代码工作正常！

＆＃13;

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);
  });
}

＆＃13;

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

＆＃13;

Answer 3

如果您希望使用命令式样式进行编码，那么您始终可以使用for of循环，例如;

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

您可以使用jQuery.each函数循环遍历json并使用concat属性（javascript）连接所需的字符串，或直接使用 + （连接运算符）

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"]

如何将JSON对象转换为按键过滤的Javascript数组？

4 个答案: