迭代JSON对象以获取自动完成建议

Question

I receive the following object that I receive from the source -

["road",[["road",53,"0E"],["roadtrip",53,"1E"],["roadrunner",53,"2E"],["roadster",53,"3E"],["roadside",53,"4E"],["roadrage",53,"5E"],["roadcycling",53,"6E"],["roadsideamerica",53,"7E"]],{"k":1,"q":"lpxvQlflqTsJ-2_PMBLImSpu1PU"}]

Values I want to fetch from the object:

road, roadtrip, roadrunner, roadster and so on.

and here's the code

    $('#query').autocomplete({
        source: function( request, response ) {
        $.ajax({
        type: "GET",
        url: , // url for the source
        dataType: "json",
        data: { 
            "tags" : request.term
        },
        success: function( data ) {
            related = data[1];
            response(data[1][0]);
        }
        });
    }

But I get only the value from the first array of the object? For eg. road OE

How should iterate to fetch the values of it?

Answer 1

That's an array not an object and if you JSONLint it:

[
    "road",
    [
        [
            "road",
            53,
            "0E"
        ],
        [
            "roadtrip",
            53,
            "1E"
        ],
        [
            "roadrunner",
            53,
            "2E"
        ],
        [
            "roadster",
            53,
            "3E"
        ],
        [
            "roadside",
            53,
            "4E"
        ],
        [
            "roadrage",
            53,
            "5E"
        ],
        [
            "roadcycling",
            53,
            "6E"
        ],
        [
            "roadsideamerica",
            53,
            "7E"
        ]
    ],
    {
        "k": 1,
        "q": "lpxvQlflqTsJ-2_PMBLImSpu1PU"
    }
]

You can see that the first key is the string "road", second is an array and the last an object.

The items you are looking for are the first keys of the arrays in the second key of the main array.

Try something like:

$('#query').autocomplete({
    source: function( request, response ) {
    $.ajax({
    type: "GET",
        url: , // url for the source
        dataType: "json",
        data: { 
            "tags" : request.term
        },
        success: function( data ) {
            var terms = [];

            for (var i=0; i < data[1].length; i++) {
                terms.push(data[1][i][0]);
            }

            respond(terms);
        }
    });
}

Answer 2

This should give you all the elements you're looking for. How you then iterate them is up to you:

jQuery.map(data[1], function(item) {return item[0];});
// output: ["road", "roadtrip", "roadrunner", "roadster", ... ]

BTW, to those saying "It's not an Object, it's an Array," an Array is a type of Object in JS.

-- Scott

Answer 3

The data provided is not an object. You have an array, which is indicated by the use of brackets '[..]'. In addition, objects have properties and values, ie { "road": 53 } .

Assuming you had a properly formed object, then you can utilize the $.getJSON() function in jQuery.

You could then traverse the valid object and access the desired properties accordingly.

HTML :

<div></div>

jQuery:

var obj = {     
    "road": [
        {
            "name": "roadtrip"
        },
        {
            "name": "roadrunner"
        }
    ]
};

var data = obj.road;

for(var i=0; i < data.length; i++){
    $('div').append(data[i].name + '<br>');
}

Demo: http://jsfiddle.net/6S6DJ/