Create a certain number of elements based on integer with jQuery

Question

I have a json file with an items category that lists items that are currently listed via an array. This item list is updated every few hours.

ex:

{
"items": [
    {
     "name": "Blueberry",
     "img": "website.com/blueberry.png"
    },
    {
     "name": "Raspberry",
     "img": "website.com/raspberry.png"
    }
         ]
}

Each item in the array is given an image and description. What I want to do is for every item, create an <img src='(item image url)'> element for the image that is listed inside the item, and create a <p> element for every item for the description that is listed.

I have already gotten the Json data via the `getJSON` function in jquery. I'm just having trouble translating that data into HTML elements. — docyoda, Mar 20 '19 at 20:07
Possible duplicate of [How to add a list of images to the document from an array of URLs?](https://stackoverflow.com/questions/29488371/how-to-add-a-list-of-images-to-the-document-from-an-array-of-urls) — Heretic Monkey, Mar 20 '19 at 20:30

score 2 · Accepted Answer · answered Mar 20 '19 at 20:32

You can achieve this with JQuery with a for loop, and create the elements dynamically using the JQuery function $(...) (Tutorial here)

In the end, You'll probably end up with something like this:

// fetch the items from the url
$.getJSON("your url").then(function(response){

  //cycle through all the items in the array
  for(var i = 0; i < response.items.length; i++){

    // create image
    var image = $('<img>').attr("src", response.items[i].img);
    // make sure to set the attribute using the "attr" function 
    //  to avoid Cross Site Scripting (see the link below)

    // create text element
    var text = $('<p>').text(response.items[i].name);

    // append the items to the container
    $("container element").append(image).append(text);
   }
});

About Cross Site Scripting

Mateus Martins · Answer 2 · 2019-03-21T17:37:05.663

0

To dinamically create elements in Pure JavaScript you can use the document.createElement


var imagesContainer = document.createElement('div')

for(var i = 0; i < array.length; i++){

    var img = document.createElement('img'),
        p = document.createElement('p');

    img.setAttribute("src", array[i].img);

    p.appendChild(document.createTextNode(array[i].name));

    imagesContainer.appendChild(img);
    imagesContainer.appendChild(p);
}

i think is this you are looking for :)

edited Mar 21 '19 at 17:37

answered Mar 20 '19 at 20:18

Mateus Martins

442
3
16

I am getting this error in the console: `Uncaught TypeError: Cannot read property 'TextNode' of undefined` – docyoda Mar 20 '19 at 20:35
sorry, i write wrong, is `createTextNode` and not `create.TextNode` @docyoda – Mateus Martins Mar 21 '19 at 17:36

Create a certain number of elements based on integer with jQuery

2 Answers2