We help IT Professionals succeed at work.

JSON/jQuery: Get Attributes from JSON Data

hankknight
hankknight asked
on
How can I get the attributes from my JSON data?
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script type="text/javascript">

data = {
    "Fruit": {
        "gv": [{
            "@attributes": {
                "Name": "Guava",
                "Calories": "112",
                "Protein": "4.2 g",
            }
        }],
        "py": [{
            "@attributes": {
                "Name": "Papaya",
                "Calories": "163",
                "Protein": "0.61 g",
            }
        }],
        "mn": [{
            "@attributes": {
                "Name": "Mango",
                "Calories": "101",
                "Protein": "0.8 g",
            }
        }]
    }
}

$.each(data, function(key, val) {
    $.each(val, function(key, val) {
        alert(key + '\nName: ' + val['Name'] + '\nCalories: ' + val['Calories'] + '\nProtein: ' + val['Protein']);
    });
});

</script>
<title>Test</title>
</head>
<body>
</body>
</html>

Open in new window

Comment
Watch Question

Commented:
Try this

$.each(data, function(key, val) {
    $.each(val, function(key0, val) {
		$.each(val,function(key, val) {
			alert(key0 + '\nName: ' + val['@attributes']['Name'] + '\nCalories: ' + val['@attributes']['Calories'] + '\nProtein: ' + val['@attributes']['Protein']);
		});
    });
});

Open in new window

Author

Commented:
Your code does not work.  Please test it with the code I posted, thanks.
Commented:
I have corrected 2 parts, data part and loop.

Please check the following code.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script type="text/javascript">

data = {
    "Fruit": {
        "gv": [{
            "@attributes": {
                "Name": "Guava",
                "Calories": "112",
                "Protein": "4.2 g",
            }
        }],
        "py": [{
            "@attributes": {
                "Name": "Papaya",
                "Calories": "163",
                "Protein": "0.61 g",
            }
        }],
        "mn": [{
            "@attributes": {
                "Name": "Mango",
                "Calories": "101",
                "Protein": "0.8 g",
            }
        }]
    }
}

$.each(data, function(key, val) {
    $.each(val, function(key0, val) {
		$.each(val,function(key, val) {
			alert(key0 + '\nName: ' + val['@attributes']['Name'] + '\nCalories: ' + val['@attributes']['Calories'] + '\nProtein: ' + val['@attributes']['Protein']);
		});
    });
});

</script>
<title>Test</title>
</head>
<body>
</body>
</html>

Open in new window

Multitechnician
Distinguished Expert 2019
Commented:
test page : http://jsfiddle.net/DGyeS/1/
data = {
    "Fruit": {
        "gv": [{
            "@attributes": {
                "Name": "Guava",
                "Calories": "112",
                "Protein": "4.2 g",
            }
        }],
        "py": [{
            "@attributes": {
                "Name": "Papaya",
                "Calories": "163",
                "Protein": "0.61 g",
            }
        }],
        "mn": [{
            "@attributes": {
                "Name": "Mango",
                "Calories": "101",
                "Protein": "0.8 g",
            }
        }]
    }
}

$.each(data, function(key, val) {
    $.each(val, function(key, val) {
        alert(key + '\nName: ' + val[0]['@attributes']['Name'] + '\nCalories: ' + val[0]['@attributes']['Calories'] + '\nProtein: ' + val[0]['@attributes']['Protein']);
    });
});

Open in new window