Error looping through list of list in javascript

Question

I'm returning from controller with Ajax a model which is set to be toArray in order to manipulate the data. However, this list has let's say 2 objects, in each object a job can have a list of pictures. I can loop through the object, but when I loop through the list within that object with the property name is says that the name doesn't exists, which in my case I'm pretty sure it exists.

the posts.FindJobs.JobPictures is a list with some bytes in it on each index.

this is my code.

  $.each(posts.FindJobs, function (i, posts) {


                console.log(posts);
                $(".job-container").append(`


                        <li class="separate-job" id="All-Jobs-Id" value="` + posts.jobId + `">
                            <div class="content-li-All-Jobs">
                                <h2 class="content-li-All-headline" id="headline-for-Update">`+ posts.Headline + `</h2>
                                <a class="btn btn-success bid-for-job" value="`+ posts.jobId + `" href="#">Bid now</a>
                                <div class="user">
                                    <blockquote class="blockquote">
                                        <p class="mb-0">
                                            <div class="about-job">`+ posts.About + `</div>
                                        </p>
                                        <div class="blockquote-footer">
                                            <cite>-`+ posts.Username + `</cite>
                                        </div>
                                    </blockquote>
                                </div>
                                <div class="pictures-li">
                                   `+$.each(posts.FindJobs.JobPictures, function (i, pictures) {
                                        console.log(pictures);
                                    })+`
                                </div>

                                <div class="job-date-li">
                                    Posted

                                </div>
                                <div class="-job-town">Area | <span class="city">`+posts.JobCity+`</span></div>
                            </div>
                        </li>



`)

            });

@messerbill in console.log(posts) I can see 2 indexes ( 2 jobs) and inside each job I can see another array which is called "JobPictures" but when I try to iterate it gives me a error. I attached 2 photos to show :) — Csibi Norbert
– Csibi Norbert, Commented May 6, 2019 at 17:48
@messerbill yes it is executed, the question was answered below :) — Csibi Norbert
– Csibi Norbert, Commented May 6, 2019 at 19:47

smashed-potatoes · Accepted Answer · 2019-05-06 18:00:08Z

The issue is that you are trying to access JobPictures on FindJobs directly, instead you need to loop over the JobPictures of each job post.

Instead of re-using the posts variable name, I recommend using a different variable name such as post i.e.:

Change your outer loop to

$.each(posts.FindJobs, function (i, post) { // <-- use post as the inner variable

And then you can loop through the current posts JobPictures with:

$.each(post.JobPictures, function (i, pictures) { // <--- JobPictures is on post

To clarify:

The call to, posts.FindJobs.JobPictures would imply the following structure:

{
  FindJobs: {
    JobPictures: [ ... ]
  }
}

When you really have:

{
  FindJobs: [ // <-- this is an array your outer loop is going over
    { jobId: 1, JobPictures: [ ... ], ... } // <-- your job items have their own JobPictures array
    { jobId: 2, JobPictures: [ ... ], ... }
    ...
  ]
}

Which would be accessed by posts.FindJobs[i].JobPictures

Collectives™ on Stack Overflow

Error looping through list of list in javascript

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related