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

【问题标题】：How to convert a JSON object to Javascript array filtered by key?如何按键将 JSON 对象转换为 Javascript 数组过滤器？
【发布时间】：2016-12-24 03:22:05
【问题描述】：

我从一个 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);


        });

    }

【问题讨论】：

您的object 已经是array。那你想做什么？！
使用assetsArray[i].App_Name而不是assetsArray[i]

标签： javascript jquery arrays json ajax

【解决方案1】：

您可以使用map() 将对象数组放入您需要的格式的数组中：

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

或者，您可以直接使用对象数组，如下所示：

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

【讨论】：

这行得通，而且正如 Maxx 建议的那样，显而易见的解决方案是设置文本，如 .text(assetsArray[i].App_Name + assetsArray[i].ID) 我很困惑，对象已经是一个数组。
那也行。我假设您需要以这种方式格式化的数组才能在代码的其他地方使用。如果没有，您可以遍历原始数组中的对象。
@eisbehr 我认为 OP 需要该格式的数据才能在他的代码中的其他地方使用。情况似乎并非如此，所以我用替代解决方案更新了我的答案
是的，刚看到。我认为现在更好。 :)

【解决方案2】：

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

那么你的代码工作正常！

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>

【讨论】：

【解决方案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);

【讨论】：

【解决方案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"]

【讨论】：