如何從JSON中檢索數據到列表中？

我有一個簡單的JSON與4項。我只想在HTML中將項目2,3,4導入li。用我的代碼導入所有項目。我是JavaScript新手。如何從JSON中檢索數據到列表中？

你能否給我一些可能的解決辦法？

item.json：

[ 
    { 
    "content": "nopic", 
    }, 
    { 
    "content": "pic1.jpg", 
    }, 
    { 
    "content": "pic2.jpg", 
    }, 
    { 
    "content": "pic3.jpg", 
    } 
]

HTML：

<div> 
    <ul> 

    </ul> 
</div>

腳本：

<script> 
$(document).ready(function(){ 

     $.getJSON('item.json', function(data) { 
      $.each(data, function (i, f) { 
       $("ul").append("<li><img src=" + f.content + "/></li>"); 
      }); 
    }); 
}); 
</script>

來源

2017-03-31 Alex

什麼是與你的代碼的問題？請閱讀[問]。 –

它看起來很好你的代碼.. –

這段代碼將所有項目導入到ul，但我不想先導入它。 – Alex

在你的情況我建議使用Array.slice：

切片（）方法返回一個數組的一部分的淺拷貝到從開始到結束選擇一個新的數組對象（不包括結尾）。原始數組不會被修改。

var data = [ 
 
    { 
 
     "content": "nopic", 
 
    }, 
 
    { 
 
     "content": "pic1.jpg", 
 
    }, 
 
    { 
 
     "content": "pic2.jpg", 
 
    }, 
 
    { 
 
     "content": "pic3.jpg", 
 
    } 
 
]; 
 
//$.getJSON('item.json', function(data) { 
 
    $.each(data.slice(1), function (i, f) { 
 
     $("ul").append("<li><img src=" + f.content + "/>" + f.content + "</li>"); 
 
    }); 
 
//});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 

 
<div> 
 
    <ul> 
 

 
    </ul> 
 
</div>

來源

2017-03-31 17:10:58 gaetanoM

與您的代碼示例，你可以做THI S於（ES6）

let arr = [ 
    { 
    "content": "nopic", 
    }, 
    { 
    "content": "pic1.jpg", 
    }, 
    { 
    "content": "pic2.jpg", 
    }, 
    { 
    "content": "pic3.jpg", 
    } 
]; 

arr.map((item,i) => { 
    if(item.content != "nopic"){ 
    return (
     "<li><img src='"+item.content+"' /></li>" 
    ); 
    } 
}); 

on ES5 

$.getJSON('item.json', function(data) { 
    $.each(data, function (i, f) { 
     if(f.content != "nopic"){ 
      $("ul").append("<li><img src=" + f.content + "/></li>"); 
     } 
    }); 
});

希望它有助於

來源

2017-03-31 17:09:26

您的代碼看起來不錯。如果你正在尋找一種方式來跳過第一個記錄，只顯示2,3和4，然後進行此更改：

$.getJSON('item.json', function(data) { 
     $.each(data, function (i, f) { 
      if(i>0){ 
       $("ul").append("<li><img src=" + f.content + "/></li>"); 
      } 

     }); 
    }); 
});

來源

2017-03-31 17:14:29 alpeshpandya

使用陣列shift()或if聲明

<script> 
    $(document).ready(function(){ 

    $.getJSON('item.json', function(data) { 
     data.shift(); 
     $.each(data, function (i, f) { 
      $("ul").append("<li><img src=" + f.content + "/></li>"); 
     }); 
    }); 
    }); 
</script>

if聲明

$.each(data, function (i, f) { 
    if(f.content != "nopic"){ 
     $("ul").append("<li><img src=" + f.content + "/></li>"); 
    } 
});

來源

2017-03-31 17:15:28 julekgwa

如果您只刪除第一個，您可以使用Array.slice()函數，如下所示：

$(document).ready(function(){ 
    $.getJSON('./item.json', function(data) { 
    var dataWithoutFirst = data.slice(1); 
    $.each(dataWithoutFirst, function (i, f) { 
     $("ul").append("<li><img src=" + f.content + "/></li>"); 
    }); 
    }); 
});

如果whant刪除所有nopic你可以這樣做：

$(document).ready(function(){ 
    $.getJSON('./item.json', function(data) { 
    $.each(data, function (i, f) { 
     if(f.content != "nopic"){ 
     $("ul").append("<li><img src=" + f.content + "/></li>"); 
     } 
    }); 
    }); 
});

看到它執行在這裏：https://plnkr.co/edit/WKYRZb0933rZBzKRyIzE

來源

2017-03-31 17:30:18

如何從JSON中檢索數據到列表中？

回答

相關問題