how to retrieve data from JSON into list?

Question

I have a simple JSON with 4 items. I want to just import item 2,3,4 into li in html. With my code imported all items. I am new in JavaScript.

can you please give me some possible way to solve ?

item.json:

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

HTML:

<div>
    <ul>

    </ul>
</div>

script:

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

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

Answer 1

With your code example you can do this on (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>");
       }
   });
});

hope it helps

Answer 2

In your case I suggest to use Array.slice :

The slice() method returns a shallow copy of a portion of an array into a new array object selected from begin to end (end not included). The original array will not be modified.

 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> 

Answer 3

Your code looks fine. If you are looking for a way to skip first record and only display 2,3 and 4 then make this change:

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

        });
   });
});

Answer 4

Use array shift() or if statement

<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 statement

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

Answer 5

If you whant to remove only the first you can use the Array.slice() function, like this:

$(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>");
    });
  });
});

If you whant to remove all nopic you can do this:

$(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>");
      }
    });
  });
});

See it executing here: https://plnkr.co/edit/WKYRZb0933rZBzKRyIzE