CODEWITHSUNDEEP
jqueryhtmljsondom
1x2x3x4x
1x2x3x4x

Reputation: 604

Adding ID to <li> from JSON with jQuery

I'm getting some data from JSON file, I do it like this:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>JSON Sample</title>
</head>
<body>
<div id="placeholder"></div>
<script src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
<script>
    $.getJSON('http://1xxxxxx:xx/vvccvyC_19-90.json',
   function(data) {
    var output="<ul>";
    for (var i in data.lbclassic) {     
            if (data.lbclassic[i].ageinweeks==19) {
    alert('ok');
    } 

    output+="<li id="/data.lbclassic[i]
    .ageinweeks/">" +                data.lbclassic[i].ageinweeks + "--" + 
    data.lbclassic[i].cumul + "--" +
    data.lbclassic[i].perhh+ "--" + 
    data.lbclassic[i].perhd+ "--" + 
    data.lbclassic[i].eggweightinweek+ "--" 
    + data.lbclassic[i].eggmasscumul1+ "--"
    + data.lbclassic[i].
    eggmassinweek+ "--" +          data.lbclassic[i].eggmasscumul
    +"</li>";
    }

    output+="</ul>";
    document.getElementById("placeholder").innerHTML=output;
    });
    </script>
    </body>
    </html>

Later I want to show or hide some of the elements on the list and for that I need their ID. How can I add the ID to each <li> element? I want that ID to be the data.lbclassic[i].ageinweeks data that I bring.

As an example. this is the 1st line that I bring from the JSON: <li>19--0.7--10--10--45--45--4.5--0.03</li>, I want it to be <li id=19>19--0.7--10--10--45--45--4.5--0.03; I tried various solutions but none worked, I either get NaN error, or simply only the text I add but not the number itself. I read various threads around stack, but none was coming from JSON.

Edit: here's the JSON

{
"lbclassic": [
    {
        "ageinweeks": 19,
        "cumul": 0.7,
        "perhh": 10,
        "perhd": 10,
        "eggweightinweek": 45,
        "eggmasscumul1": 45,
        "eggmassinweek": 4.5,
        "eggmasscumul": 0.03
    },
    {

Upvotes: 1

Views: 141

Answers (3)

Light
Light

Reputation: 1097

You need iterate through json string and iterate using each. fiddle

$(document).ready(function(){
var json = {
    "lbclassic": [
{
    "ageinweeks": 19,
    "cumul": 0.7,
    "perhh": 10,
    "perhd": 10,
    "eggweightinweek": 45,
    "eggmasscumul1": 45,
    "eggmassinweek": 4.5,
    "eggmasscumul": 0.03
}]};
var str = "<ul>";
$.each(json.lbclassic, function(index, element) {
    str += "<li id='" + element.ageinweeks + "--" + element.cumul  +"--"+element.perhh+"'> test";
    str += "</li>"
});
str += "</ul>";
console.log(str);

$("#placeholder").append(str);
});

Upvotes: 0

ebilgin
ebilgin

Reputation: 1252

You need to replace 

output+="<li id="/data.lbclassic[i]
    .ageinweeks/">"

with 

output+="<li id=" + data.lbclassic[i]
    .ageinweeks + ">"

you can see it my fiddle. http://jsfiddle.net/ebilgin/34egbadn/

Upvotes: 2

void
void

Reputation: 36703

You need to change you js a little bit

$.getJSON('http://1xxxxxx:xx/vvccvyC_19-90.json',
   function(data) {


         var output="<ul>";
         for (var i in data.lbclassic) {     
            if (data.lbclassic[i].ageinweeks==19) {
            alert('ok');
            } 

    output+="<li id='"+data.lbclassic[i].ageinweeks+"'>" +                                    
    +data.lbclassic[i].ageinweeks + "--" + 
    data.lbclassic[i].cumul + "--" +
    data.lbclassic[i].perhh+ "--" + 
    data.lbclassic[i].perhd+ "--" + 
    data.lbclassic[i].eggweightinweek+ "--" 
    + data.lbclassic[i].eggmasscumul1+ "--"
    + data.lbclassic[i].
    eggmassinweek+ "--" +          data.lbclassic[i].eggmasscumul
    +"</li>";
    }

    output+="</ul>";
    document.getElementById("placeholder").innerHTML=output;
    });

The way you are concatenating data.lbclassic[i].ageinweeks is wrong.

Upvotes: 1

Related Questions