How to assign unique ids to variable in loops using jQuery?-CodePudding

I have a $.getJSON call that returns a list of posts from an AzureDB. Within this, there is a $.each loop and this generates HTML for each post. I need to access the unique ID for each of these posts.

The unique ID is generated like so:

// inside the $.each loop
noSpecialCharPostID = val["id"].slice(0, -1);

This is then assigned to ID like so (also inside the loop):

items.push('<input type="text" id="commentContent'   specialCharPostID   '" placeholder="Add A Comment..."></input>');

This assigned the correct ID to the post like so:

Correct IDs Assigned

I then have the function that adds a comment and for this, I need to read each of these IDs. I use the variable specialCharPostID to do this, but the problem is that specialCharPostID holds the ID of the last post and I so I can't access any post ID previous to the last.

The func to add a comment should be:

function submitNewComment() {
    // clear existing comments to avoid duplicating
    allComments = [];

    // Create a form data object
    addCommentData = new FormData();

    console.log(specialCharPostID);

    // Get form variables and append them to the form data object
    addCommentData.append('commentContent', $("#commentContent"   << POST ID >>).val());
    addCommentData.append('id', newCommentID);
    addCommentData.append('postID', $("#postComment"   << POST ID >>).val());
    addCommentData.append('userID', loggedUserID);
    addCommentData.append('userName', loggedUserName);


    // Check comment data
    for (var pair of addCommentData.entries()) {
        console.log(pair[0]   ', '   pair[1]);
    }
}

The issue is that if I click the add comment button on post 1 (id = 1), but I have 2 posts, the << POST ID >> = 2 and not 1

I've tried an array but, haven't got it to work! Someone help!

CodePudding user response：

Whatever calls submitNewComment should pass that information in. I would expect that your add comment button has an onclick handler that calls submitNewComment.

One way to approach this is to figure out the ID in onclick handler, in which case you'd start your function like this:

function submitNewComment(specialCharPostID)

Alternatively, the click event is passed by default. Try this:

function submitNewComment(e) { 
    console.log(e);

You'll see that the event "e" has a lot of useful info, including e.currentTarget, which could have your post ID as an attribute.

I don't see this part of your code. If you're outputting an onclick (or similar) handler for each item, the first approach is easier -- add the specialCharPostID as a parameter.

CodePudding user response：

Try to use a variable having value = 0, like var x = 0, then in the for loop using the x value in the id of that comment and then increase it by 1 using x inside the loop. Then you will have comments with unique numbers! Ask me for more help!