how to fix with a nested json loop whose output is [object Object]

Question

So I'm making a fetch api with jquery. Everything is normal, but when I loop inside the loop it displays [object object], and when I log into the nested loop the data is normal. this my json

[
  {
    "Title": "Bla Bla",    
    "Author": "Feng Qi Yue",
    "Artist": "Feng Qi Yue",
    "User": {
      "ID": 1,
      "CreatedAt": "2021-02-23T11:16:10.722+07:00",
      "UpdatedAt": "0001-01-01T00:00:00Z",
      "Username": "soel30",
      "Password": "blablbalbala",
      "UserRefer": 1
    },
     "Genre": [
        {
        "ID": 1,
        "CreatedAt": "2021-02-23T09:42:38.681+07:00",
        "UpdatedAt": "2021-02-23T09:42:38.681+07:00",
        "DeletedAt": null,
        "Name": "Adventure",
        "Slug": "adventure"
      },
  }
]

and this my jquery

$(document).ready(function () {
            var url = "http://someurl"
            fetch(url)
                .then(res => res.json())
                .then(data => {
                    $.each(data, function(i, k) {
                        $("tbody.list").append(`
                        <tr>
                            <td>`+ data[i].Title + `</td>
                            <td>`+ data[i].User.Username +`</td>
                            <td>` + data[i].Author + `</td>
                            <td>`+  data[i].Artist +`</td>
                            <td>`+  $.each(data[i].Genre, function(o, l) { data[i].Genre[o].Name })
                                 +`</td> //the problem is here
                            <td>`+  data[i].Release +`</td>
                            </tr>
                        `)
                    })
                })
        }

@Barmar I fixed it

sultan achmad
– sultan achmad

2021-02-25 00:53:22 +00:00
Commented Feb 25, 2021 at 0:53 — sultan achmad
– sultan achmad, Commented Feb 25, 2021 at 0:53

CertainPerformance · Accepted Answer · 2021-02-25 00:51:39Z

1

Map the Genre array to an array of <td>s with the names, then join by a string, you probably want commas:

<td>`+  data[i].Artist +`</td>
<td>`+ data[i].Genre.map(item => item.name).join(',') + `</td>
<td>`+  data[i].Release +`</td>

I'd also suggest using the ${} syntax provided by template literals to make the syntax cleaner, as well as using the second argument to .each's callback - or, even shorter, invoke the array iterator:

// $.each(data, function(i, song) {
for (const song of data) {
    $("tbody.list").append(`
    <tr>
        <td>${song.Title + `</td>
        <td>${song.User.Username}</td>
        <td>${song.Author}</td>
        <td>${song.Artist}</td>
        <td>${song.Genre.map(item => item.name).join(', ')}</td>
        <td>${song.Release}</td>
    </tr>
    `);
}

Another thing to keep in mind is that direct concatenation of HTML is a security risk when the values being concatenated isn't trustworthy. So make sure the data is good first, or run it through an XSS cleaner.

answered Feb 25, 2021 at 0:51

CertainPerformance

373k55 gold badges354 silver badges359 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

sultan achmad Over a year ago

but how to take it into words. because when I put it in the a href, it joined even though I wanted each word to have one a href. Can you explain?

CertainPerformance Over a year ago

If you want an <a>, you'll have to put that in the HTML string returned by the .map callback. item => `<a href=something>${item.name}</a> or something of the sort

Collectives™ on Stack Overflow

how to fix with a nested json loop whose output is [object Object]

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related