CODEWITHSUNDEEP
jsonjquery
Massimo
Massimo

Reputation: 141

Why getjson return only 1 row

I would like to cycle in a list html json file content.

my target is put inside a list html content of test field

<ul>
<li>text 1 text 1</li>
<li>text 2 text 2</li>
<li>text 3 text 3</li>
<li>text 4 text 4</li>
</ul>

this is my json file (result.js)

{
    "news": [
        {
            "title": "text 1 text 1",
            "id": "1111"
        },
        {
            "title": "text 2 text 2",
            "id": "2222"
        },
        {
            "title": "text 3 text 3",
            "id": "3333"
        },
        {
            "title": "text 4 text 4",
            "id": "4444"
        }
    ]

}

this is my code htnl with function getjson 

<html>
<head>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){



$.ajax({     
    url: 'result.js',     
    dataType: 'json',     
    async: false,
    success: processJSON() 
}); 


function processJSON() {

    $.getJSON("result.js",function(result){

      $.each(result, function(i,val){
        HOW CAN CYCLE HERE title field?????????
      });
    });
}


});
</script>
</head>
<body>


<div id="box"></div>

</body>
</html>

Upvotes: 1

Views: 1755

Answers (3)

gen_Eric
gen_Eric

Reputation: 227240

First off, why are you requesting result.js twice? You have a $.ajax call whose callback does $.getJSON, there's no reason to get the data twice.

Second, you need to loop through result.news, to get each item.

Third, when using functions as variables, lose the (). That will call the function and use its return value, not the function itself.

$.ajax({
    url: 'result.js',
    dataType: 'json',
    success: processJSON
});

function processJSON(result){
    $.each(result.news, function(i, val){
        console.log(val.title); // Each news title
    });
}

Or using $.getJSON

$.getJSON("result.js", processJSON);

function processJSON(result){
    $.each(result.news, function(i, val){
        console.log(val.title); // Each news title
    });
}

P.S. Don't use async: false unless you really need to. It will lock up the browser until the request is complete.

Upvotes: 1

Tim Hoolihan
Tim Hoolihan

Reputation: 12396

This is untested, but hopefully you get the idea. The key points are:

  • You're version calls the ajax endpoint twice
  • You don't need the function and everything to be wrapped in the document.ready, just the initial ajax call
  • You need to pass the resulting json to the success function
  • You need to loop through the news property

  • You access properties with either object.property or object['property']

    function processJSON(data) {
      var list = $('<ul />');
      $.each(data.news, function(i,val){
        list.append($('<li />').append(val.title));
      });
      $('#box').append(list);
}

$(document).ready(function(){
$.ajax({     
    url: 'result.js',     
    dataType: 'json',     
    async: false,
    success: processJSON 
}); 
});

</script>
</head>
<body>


<div id="box"></div>

</body>
</html>

Upvotes: 2

jrummell
jrummell

Reputation: 43077

The second parameter is the current value, so you can access it like so:

$.getJSON("result.js",function(result)
{
   $.each(result.news, function(i,val)
   {
      alert(val.title);
   });
});

http://api.jquery.com/jQuery.each/

As Rocket pointed out in the comments, you don't need both $.ajax and $.getJSON. Your entire javascript snippet could become the following:

$(document).ready(function() 
{
    $.getJSON("result.js",function(result)
    {
       $.each(result.news, function(i,val)
       {
          alert(val.title);
       });
    });
});

Upvotes: 2

Related Questions