how to display multiple json data in html

Question

I am working with weather api, my intention is to display the json data into simple html view....

The problem is that (perhaps) the above script not working at all, even alert, if i am doing it wrong please someone guide....

Script and html

<div id ="fj"></div>

$(document).ready(function() {
  var teams;
  $.getJSON("http://api.openweathermap.org/data/2.5/forecast/daily?lat=33.5689&lon=72.6378&cnt=10", function(dataDD) {
    //do some thing with json  or assign global variable to incoming json.
    var tasks = $.parseJSON(dataDD.city);
    alert(tasks);
    //alert('empLoggedId');
    $.each(tasks, function(key, value) {
      $("#fj").append(data.weather.description);

    });
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<div id="fj"></div>

Any kind of hep or reference will be appreciated Thanks for your time

Answer 1

Here you go, http://jsfiddle.net/9c2tb8xk/

I am not sure what you are trying to list but I think this is what you want.

$(document).ready(function() {
  var teams;
  $.getJSON("http://api.openweathermap.org/data/2.5/forecast/daily?lat=33.5689&lon=72.6378&cnt=10", function(dataDD) {
    //$.getJson parses for you, dont try to parse it again.
    var tasks = dataDD.list //tasks is list property of dataDD
    $.each(tasks, function(key, value) { //for each value in list will be in value
      $("#fj").append(value.weather[0].description); //I used the value as a specific item from list. 
    });
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<div id ="fj"></div>