Implement a loop using $.each along with conditional statements utilizing if with $.getJSON

Question

Implement a loop using $.each along with conditional statements utilizing if with $.getJSON

Struggling with the usage of $.each and unable to figure out how to properly print all the data from my JSON file. Additionally, I've encountered issues with the if statement as well - no matter what approach I take, I can't seem to get any data printed.

Here's a snippet from my JSON file:

[
{
"expo":"pit",
"datum":"05.06.2011 - 05.06.2016",
"img":"images/pit_home.jpg",
"link":"exp1_index.html"
},
{
"expo":"Space Odessy 2.0",
"datum":"17.02 - 19.05.2013",
"img":"images/so_home.jpg",
"link":"exp2_index.html"
}
]

Below is my $.getJSON script:

<script type="text/javascript">
    function read_json() {
        $.getJSON("home.json", function(data) {
            var el = document.getElementById("kome");
            el.innerHTML = "<td><a href=" + data.link + " data-ajax='false'><img src=" + data.img + "><div class='dsc'>" + data.expo + "<br><em>" + data.datum + "</em></div></a></td>";
        });
    }
</script>

Any suggestions on how I can integrate the $.each statement effectively and troubleshoot the if statement?

javascript json if-statement each getjson

Answer 1

Answer №1

Give this a go

$.getJSON("home.json", function (data) {
    var html = '',
        element = document.getElementById("kome");
    $.each(data, function (key, value) {

         html += "<td><a href=" + value.link + " data-ajax='false'><img src=" + value.img + "><div class='dsc'>" + value.expo + "<br><em>" + value.datum + "</em></div></a></td>";
    });
    element.innerHTML = html;
});

Answer 2

Give this a go

$.getJSON("home.json", function (data) {
    var html = '',
        element = document.getElementById("kome");
    $.each(data, function (key, value) {

         html += "<td><a href=" + value.link + " data-ajax='false'><img src=" + value.img + "><div class='dsc'>" + value.expo + "<br><em>" + value.datum + "</em></div></a></td>";
    });
    element.innerHTML = html;
});

Answer 3

Answer №2

Is this similar to what you're looking for?

<script type="text/javascript>
    function read_json() {
        $.getJSON("home.json", (data) => {
            let html = '';
            data.forEach((record, i) => {
                html += '' +
                '<td>' +
                    '<a href="' + record.link + '" data-ajax="false">' +
                        '<img src="' + record.img + '">' +
                        '<div class="dsc">' +
                            record.expo + '<br>' +
                            '<em>' + record.datum + '</em>' +
                        '</div>' +
                    '</a>' +
                '</td>';
            });
            $('#kome').html(html);
        });
    }
</script>

Please note: I have not tested this code personally, so there may be some syntax errors, especially regarding the quotation marks in string concatenation.

It's worth mentioning that you can achieve the same result using a simple for-loop instead of jQuery's $.each:

for (let i = 0; i < data.length; i++) {
    let record = data[i];
    // do something...
}

If you are working with elements in the DOM, then jQuery's .each() method is quite handy. For instance, if you need to iterate over elements with the 'dsc' class, you can do:

$('.dsc').each((i, dsc) => {
    // Perform actions on the $(dsc) element.
});

Furthermore, since you are already using jQuery, it would be best to utilize jQuery's selectors like $('#kome').

For more detailed examples and information, refer to jQuery's official documentation.

Answer 4

Is this similar to what you're looking for?

<script type="text/javascript>
    function read_json() {
        $.getJSON("home.json", (data) => {
            let html = '';
            data.forEach((record, i) => {
                html += '' +
                '<td>' +
                    '<a href="' + record.link + '" data-ajax="false">' +
                        '<img src="' + record.img + '">' +
                        '<div class="dsc">' +
                            record.expo + '<br>' +
                            '<em>' + record.datum + '</em>' +
                        '</div>' +
                    '</a>' +
                '</td>';
            });
            $('#kome').html(html);
        });
    }
</script>

Please note: I have not tested this code personally, so there may be some syntax errors, especially regarding the quotation marks in string concatenation.

It's worth mentioning that you can achieve the same result using a simple for-loop instead of jQuery's $.each:

for (let i = 0; i < data.length; i++) {
    let record = data[i];
    // do something...
}

If you are working with elements in the DOM, then jQuery's .each() method is quite handy. For instance, if you need to iterate over elements with the 'dsc' class, you can do:

$('.dsc').each((i, dsc) => {
    // Perform actions on the $(dsc) element.
});

Furthermore, since you are already using jQuery, it would be best to utilize jQuery's selectors like $('#kome').

For more detailed examples and information, refer to jQuery's official documentation.

Answer 5

Answer №3

When using $.each, keep in mind that it can iterate over arrays [] or objects {}. If your JSON data contains both types, start by handling the array first to access the object within each iteration. For more information, refer to the jQuery each documentation.

Another important point to remember is when appending to innerHTML, make sure to use "+=" instead of "=" to avoid resetting the HTML content during each iteration.

var element = document.getElementById("kome");
$.getJSON('ajax/test.json', function(data) { 
    $.each(data, function(index, linkData) {
        element.innerHTML += '<a href="' + linkData.link + '">' + linkData.expo + '</a>';
    });
}

Answer 6

When using $.each, keep in mind that it can iterate over arrays [] or objects {}. If your JSON data contains both types, start by handling the array first to access the object within each iteration. For more information, refer to the jQuery each documentation.

Another important point to remember is when appending to innerHTML, make sure to use "+=" instead of "=" to avoid resetting the HTML content during each iteration.

var element = document.getElementById("kome");
$.getJSON('ajax/test.json', function(data) { 
    $.each(data, function(index, linkData) {
        element.innerHTML += '<a href="' + linkData.link + '">' + linkData.expo + '</a>';
    });
}

Implement a loop using $.each along with conditional statements utilizing if with $.getJSON

Answer №1

Answer №2

Answer №3

Similar questions

Creating a Vue.js vuetify input that restricts the user to entering only three digits before the decimal point and two digits after the decimal point

Json File containing a Listbox

The process of assigning a function to an object in JavaScript is currently not functioning properly

What is the ideal event to trigger a response when the user completes entering text into the search field in Vue.js?

Bring in the Stencil JS library from a separate Stencil JS library

Select: Exchange icon when clicked

Concealing a div based on a condition

When using Node.js, you may encounter the error message: "TypeError: brevo.ApiClient is not a constructor

Looking to pass multiple props and run a function for each one? Here's how!

Is there a way to obtain the guild ID during the createGuild event?

Replicate styling while copying CodeMirror code

What are the advantages of retrieving a complete category tree, including all categories and sub-categories, versus retrieving only the necessary branches as required?

getting data from JavaScript function by making an asynchronous request to RESTful API

Transform jQuery code into vanilla JavaScript

The app is having trouble loading in Node because it is unable to recognize jQuery

The module 'react/jsx-runtime' could not be located within the path relative to '@mui/styled-engine/StyledEngineProvider/StyledEngineProvider.js'

Is your div not loading correctly due to JQuery or Javascript?

Using Next.js Link prefetch feature can lead to unexpected 404 errors on a production website

Tips for effectively utilizing foreach loops in JQuery

Prevent the page from scrolling while the lightbox is open