CODEWITHSUNDEEP
javascriptjqueryjsonajax
Atal Shrivastava
Atal Shrivastava

Reputation: 702

How do I match an attribute value to a JSON value in JavaScript?

I've got a JSON string that looks like this:

{
  "DocID": "NA2", 
  "DocType": "Phase1.1 - Visa Documents (This section is applicable for HK work location only)", 
  "DocSubType": "New Application", 
  "DocName": "Passport / Travel Document (Soft copy only) *", 
  "DocDescription": ""
}

In my HTML I have set the data-docid atttribute in a td as the DocID key's value (in another API call)

Now, I want to compare if value.DocID is equal (==) to the docid and insert DocSubType in that particular td.

Here is my code:

$.ajax({
  type: "GET",
  url: docuViewURL,
  success: function(data) {
    $.each(data, function(index, value) {
      console.log(index);
      var a = $("#candidateDetails tbody td a:eq(index)").attr("data-docid");
      var b = value.DocID;
      if (a == b) {
        // then
      }
    });
  }
});

It doesn't work and even the index variable won't give me the output for var a instead I get undefined.

What am I doing wrong and what can I change.

Upvotes: 1

Views: 535

Answers (1)

Malekai
Malekai

Reputation: 5031

To start, you're not inserting your index variable into your selector.

This is a concatenated string:

"#candidateDetails tbody td a:eq(" + index + ")"

This is a template literal:

`#candidateDetails tbody td a:eq(${index})`

This is a string literal:

"#candidateDetails tbody td a:eq(index)"

You're using a string literal containing the word "index" to select the desired element when you should be using a concatenated string or a template literal to insert the index variable into your selector string.

Another problem is that you're passing a string instead of a number to the :eq() selector.

This is because you're using the $.each function wrong.

You're looping through a (JSON) object, not an array, there is no index, there are keys, and in your case the keys are strings (E.G: "DocID", "DocType", "DocSubType", etc, etc).

So even if you do properly insert the index variable into your selector, these are the selectors you'll end up with:

"#candidateDetails tbody td a:eq(DocID)"
"#candidateDetails tbody td a:eq(DocType)"
"#candidateDetails tbody td a:eq(DocSubType)"
"#candidateDetails tbody td a:eq(DocName)"
"#candidateDetails tbody td a:eq(DocDescription)"

You solve this problem (and save yourself a lot of trouble) by using an attribute selector instead of the :eq() selector, like this:

"#candidateDetails tbody td a[data-docid]"

This prevents you from manually having to specify the index of your elements, giving you more freedom with the positioning of elements in your HTML.

Another thing is that your code doesn't explicitly state that this is a JSON GET request.

Sure jQuery might be smart enough to tell what kind of request this is but as the old saying goes, explicit is better than implicit and that doesn't just apply to Python programs.

I'd advice you to use the jQuery.getJSON function, which is explicitly meant to create JSON GET requests, instead.

Replace your Ajax request with this:

jQuery.getJSON(docuViewURL, function(data) {
  $.each(data, function(key, value) {
    // NOTE: cache elements not values
    var link = $("#candidateDetails tbody td a[data-docid]");
    // NOTE: if you're only going to use a value once, there's no need to cache it
    // NOTE: use `data("x")` instead of `attr("data-x")` for more concise code
    if (link.length > 0 && link.data("docid") == value.DocID) {
      // do stuff with the link
    }
  });
});

You could also get rid of the data() function and use an attribute selector:

jQuery.getJSON(docuViewURL, function(data) {
  $.each(data, function(key, value) {
    // get the link and check to see if it exists
    var link = $("#candidateDetails tbody td a[data-docid='" + value.DocID + "']");
    if (link.length > 0) {
      // do stuff with the link
    }
  });
});

NOTE: if you need more information, the jQuery API documentation has a search bar that you can use to find documentation for functions you're struggling with.

NOTE: I'm not trying to be rude or insult you but I think it would go a long way if you read the MDN JavaScript guide which would help you understand the basics and fundamentals of JavaScript.

NOTE: there are also HTML and CSS guides.

Good luck and remember to keep your code DRY, SOLID and Simple.

Upvotes: 1

Related Questions