如何将带有数组的JSON对象导入Ajax自动完成响应?

时间:2019-01-06 04:04:56

标签: javascript jquery json

我正在使用的公司电子邮件生成应用程序具有自动完成输入,可将电子邮件主题数据自动填充到表单中。数据作为JSON对象返回,但是两个对象值extrapsextraul包含多维数组。我能够得到普通键:值数据在响应中就很好了,但我似乎无法弄清楚如何拉入数组,因此可以遍历它们以更新表单的某些部分。

下面是一些传入的JSON代码:

0:
    emaildate: "2019-01-10"
    extraps: Array(2)
        0: {extrap: "test paragraph", position: 1}
        1: {extrap: "another paragraph", position: 3}
        length: 2
        __proto__: Array(0)
    extraul: Array(4)
        0: {ulid: 1, position: 2, li: "list item 1", liposition: 1}
        1: {ulid: 1, position: 2, li: "list item 2", liposition: 2}
        2: {ulid: 1, position: 2, li: "list item something new", liposition: 3}
        3: {ulid: 1, position: 2, li: "A new list item", liposition: 4}
        length: 4
        __proto__: Array(0)
    id: 44
    label: "Some Kind of Email Theme - 2019-01-10"
    lastupdated: "2019-01-06 02:00:04"
    store: "Premier"
    themedesc: "Here's a description of the theme."
    themeimage: null
    themeincludeextrap: 1
    themeincludeul: 1
    themelink: "some-kind-of-email-theme"
    themelinkinclude: 1
    themename: "Some Kind of Email Theme"
    themenotes: "Some notes about it"
    themesortorder: 0
    value: "Some Kind of Email Theme"
    __proto__: Object
    length: 1
__proto__: Array(0)

下面是从autotheme.php将其引入的javascript:

//Autofill Theme Info based on text entry
$( "#themename" ).autocomplete({
    source: function( request, response ) {
        $.ajax({
            url: "autotheme.php",
            type: "GET",
            dataType: "json",
            data: {
                q: request.term
            },
            success: function(data) {
                console.log(data);
                response($.map(data, function(item) {
                    return {
                        id: item.id,
                        value: item.value,
                        label: item.label,
                        themename: item.themename,
                        themenotes: item.themenotes,
                        themedesc: item.themedesc,
                        themeimage: item.themeimage,
                        themeincludeextrap: item.themeincludeextrap,
                        themeincludeul: item.themeincludeul,
                        themelinkinclude: item.themelinkinclude,
                        themelink: item.themelink,
                        themeextraps: item.extraps,
                        themeextraul: item.extraul
                    }
                }))
            },
            error: function(errorThrown){
                console.log(errorThrown);
                console.log("There is an error with theme autocomplete.");
            }
        });
    },
    minLength: 2,
    select: function(event, ui) {
        if (ui.item) {
            $this = $(this);
            $('#themeid').val('');
            $('#extratext').html('');
            $('#themename').val(ui.item.themename);
            $('#themenotes').val(ui.item.themenotes);
            $('#themedesc').val(ui.item.themedesc);
            var themeimage = ui.item.themeimage;
            var themeincludeextrap = ui.item.themeincludeextrap;
            var themeincludeul = ui.item.themeincludeul;
            var themelinkinclude = ui.item.themelinkinclude;
            var themeextraps = ui.item.extraps;
            var themeextraul = ui.item.extraul;
            if(themeextraps !== undefined) {
                var extrapcount = themeextraps.length;
            }
            if(themeextraul !== undefined) {
                var extraulcount = themeextraul.length;
            }
            if((themeextraps !== undefined) || (themeextraul !== undefined)) {
                var extratextpositions = {};
                $.each(themeextraps, function(i, themeextraps) {
                    extratextpositions[themeextraps.position] = 'p';
                })
                $.each(themeextraul, function(i, themeextraul) {
                    extratextpositions[themeextraul.position] = 'ul';
                })
                $.each(extratextpositions, function(key, value) {
                    if(extratextpositions[key] == 'p') {
                        addExtraP.call(this);
                    } else {
                        addExtraUl.call(this);
                    }
                });
                $('#themelink').val(ui.item.themelink);
                if(themelinkinclude == 1) {
                    $('#themelinkinclude').prop("checked", true);
                } else {
                    $('#themelinkinclude').prop("checked", false);
                }
                event.preventDefault();
            }
        },
        open: function(event, ui) {
            $(".ui-autocomplete").css("z-index", 1000);
        },
        complete: function(){
            $("#themename").removeClass("ui-autocomplete-loading");
        }
    }
}); 

我能够得到简单的key:value值就好了,但是我对数组没有定义。我确定需要采用其他方法,但是我不知道如何并且似乎也无法在此处的其他线程中找到答案。任何帮助将不胜感激!

1 个答案:

答案 0 :(得分:0)

在@Bibberty的帮助下,找到了解决此问题的方法。我不确定这是否是解决问题的最优雅或最简单的方法,但是它对我有用。我从JSON数据值创建了一个数组,然后从数据数组中的数组创建了变量,并将它们添加到响应返回值中。这是新的功能代码(或至少重要的部分):

//Autofill Theme Info based on text entry
    $( "#themename" ).autocomplete({
        source: function( request, response ) {
            $.ajax({
                url: "autotheme.php",
                type: "GET",
                dataType: "json",
                data: {
                    q: request.term
                },
                success: function(data) {
                    const results = data.map(function (value, label) {
                        return [value];
                    })
                    var extraps = results[0][0]['extraps'];
                    var extraul = results[0][0]['extraul'];
                    response($.map(data, function(item) {
                        return {
                            id: item.id,
                            value: item.value,
                            label: item.label,
                            themename: item.themename,
                            themenotes: item.themenotes,
                            themedesc: item.themedesc,
                            themeimage: item.themeimage,
                            themeincludeextrap: item.themeincludeextrap,
                            themeincludeul: item.themeincludeul,
                            themelinkinclude: item.themelinkinclude,
                            themelink: item.themelink,
                            extraps: extraps,
                            extraul: extraul
                        }
                    }))
                    $("#themename").removeClass("ui-autocomplete-loading");
                },
                error: function(errorThrown){
                    console.log(errorThrown);
                    console.log("There is an error with theme autocomplete.");
                }
            });
        },
        minLength: 2,
        select: function(event, ui) {
            if (ui.item) {
                $this = $(this);
                console.log(ui.item.extraps);
                $('#themeid').val('');
                $('#extratext').html('');
                $('#themename').val(ui.item.themename);
                $('#themenotes').val(ui.item.themenotes);
                $('#themedesc').val(ui.item.themedesc);
                var themeimage = ui.item.themeimage;
                var themeincludeextrap = ui.item.themeincludeextrap;
                var themeincludeul = ui.item.themeincludeul;
                var themelinkinclude = ui.item.themelinkinclude;
                var themeextraps = ui.item.extraps;
                var themeextraul = ui.item.extraul;
                if(themeextraps !== undefined) {
                    var extrapcount = themeextraps.length;
                }
                if(themeextraul !== undefined) {
                    var extraulcount = themeextraul.length;
                }

                ...