jquery/ajax - how to iterate through a json message with duplicate keys?-CodePudding

I receive with my ajax post request a message with values to display. This json response message looks like this:

{
    "line": {
        "name": "Google item",
        "images": {
            "element": {
                "order": "1",
                "link": "https://google.com/1.jpg",
                "name": "1.jpg"
            },
            "element": {
                "order": "2",
                "link": "https://google.com/2.jpg",
                "name": "2.jpg"
            },
            "element": {
                "order": "3",
                "link": "https://google.com/3.jpg",
                "name": "3.jpg"
            },
            "element": {
                "order": "4",
                "link": "https://google.com/4.jpg",
                "name": "4.jpg"
            },
            "element": {
                "order": "5",
                "link": "https://google.com/5.jpg",
                "name": "5.jpg"
            }
        },
        "features": {
            "element": {
                "name": "1",
                "order": "1"
            },
            "element": {
                "name": "2",
                "order": "2"
            },
            "element": {
                "name": "3",
                "order": "3"
            },
            "element": {
                "name": "4",
                "order": "4"
            }
        },
        "purchasing_price": "10",
        "selling_price": "20",
        "ftp_path": "google/item",
        "description": ""
    }
}

I'm in development and have not so much experience with json in jquery/ajax. I tried this:

function parseContent(content){
    $("#name").val(content.line.name);
    $("#ftp_path").val(content.line.ftp_path);
    $("#html_description").val(content.line.description);

    $("#feature").remove();
    $.each(content.line.features, function(k, v){
        $("#features").append('<input type="text" class="form-control mt-3" id="feature" value="'   v.name   '" required>');
        alert(v.name );  
    });
}

My problem is, the variable content contains just the last image und feature element. But in chrome/network I could see, the complete message has been received.

So I found out there is a parsing issue: Parsed JSON contains only the last element.

But how can I fix this in my case, to iterate through all elements?

CodePudding user response：

The JSON specification says:

The names within an object SHOULD be unique.

The names in those objects are not.

SHOULD means:

that there may exist valid reasons in particular circumstances to ignore a particular item, but the full implications must be understood and carefully weighed before choosing a different course.

The implications here are that every JSON parser (that I'm aware of at least) will ignore all but one of the values with duplicate names in an object.

If you really need to deal with that data then you are going to have to either track down a parser which can handle it (I'm not aware of any) or write a custom JSON parser which can (you'll also need to decide what data structure you want to generate from it because JS can't have duplicate property names in objects either). There are a number of JSON parsers on npm you might want to examine the source code of as a starting point.

A better solution would be to change whatever is generating the source data to produce a sensible format that doesn't violate a SHOULD requirement. Replacing the duplicate property names with an array for example.