AJAX JSON Data Population on Button Click - Array Issue

Question

I am trying to figure out how to select specific JSON objects when a line item meets a variable or variables that is passed on button click. So far, I get it to work but it says [object],[object]. I believe this is because it is returned in an array. What am I missing?

    var Type = "Champagne";

    $(document).ready(function(){
        $("button").click(function(){
            $("#data-details").empty();
            $.get("working-data-file.json",{Type: Type},function(result){
                $.each(result.data, function(i, field){
                    $("#data-details").append(this.objects.Title);
                });
            });
        });
    });

The .JSON file looks like this:

{"objects": 
    [
        {
        "Type": "Champagne",
        "Sweetness": "Brut",
        "Producer": "Dom Perignon",
        "Vintage": "2006", 
        "Recommendation": "Classic",
        "Data": "12.29.2012",
        "Title": "The wine’s opulence – contained and succulent, round at heart – reveals itself in the mouth."
        },
        {
        "Type": "Cava",
        "Sweetness": "Brut-Nature",
        "Producer": "Canals Canals",
        "Vintage": "2014",
        "Recommendation": "Preferred",
        "Data": "12.29.2012",
        "Title": "2nd Cava."
        }
    ]
}

I was just going over a tutorial that mentioned I would need to loop through the data. To which I modified this slightly but just results in a blank. — Xeverus
– Xeverus, Commented Jan 2, 2017 at 1:57
$.each(result.objects,function(k,v){//your code}) this will solve your problem just give it try — uzaif
– uzaif, Commented Jan 2, 2017 at 2:01

Bryan Dellinger · Accepted Answer · 2017-01-02 02:16:11Z

you can loop through with jquery each.

$( document ).ready(function() {
	$('#button').click(function(e){
    $.each(data.objects, function( i, item) {
    	$("#data-details").append('<p>' + item.Title + '</p>');
  	});
	})
});


var data = {"objects": 
    [
        {
        "Type": "Champagne",
        "Sweetness": "Brut",
        "Producer": "Dom Perignon",
        "Vintage": "2006", 
        "Recommendation": "Classic",
        "Data": "12.29.2012",
        "Title": "The wine’s opulence – contained and succulent, round at heart – reveals itself in the mouth."
        },
        {
        "Type": "Cava",
        "Sweetness": "Brut-Nature",
        "Producer": "Canals Canals",
        "Vintage": "2014",
        "Recommendation": "Preferred",
        "Data": "12.29.2012",
        "Title": "2nd Cava."
        }
    ]
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type=button id="button" value="click me"/>

<div id="data-details"></div>

hubman · Accepted Answer · 2017-01-02 02:07:27Z

try with:

var result={"objects": 
    [
        {
        "Type": "Champagne",
        "Sweetness": "Brut",
        "Producer": "Dom Perignon",
        "Vintage": "2006", 
        "Recommendation": "Classic",
        "Data": "12.29.2012",
        "Title": "The wine’s opulence – contained and succulent, round at heart – reveals itself in the mouth."
        },
        {
        "Type": "Cava",
        "Sweetness": "Brut-Nature",
        "Producer": "Canals Canals",
        "Vintage": "2014",
        "Recommendation": "Preferred",
        "Data": "12.29.2012",
        "Title": "2nd Cava."
        }
    ]
}

Object.keys(result).forEach(key => {
  let value = result[key];
  console.log(value[0].Title);
})

[key] })

Collectives™ on Stack Overflow

AJAX JSON Data Population on Button Click - Array Issue

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related