Jquery, loop through AJAX JSON response and append to array of element ids

Question

I have found some similar questions but not quite exactly what I need. I am using AJAX to get the real-time status of property availability. I am getting the response to work as needed and can see the response in the console log. What I am unsure of how to do, is to iterate through the JSON response and append the information to existing element id's to show the availability.

The JSON response is set up like so: [{status: AVAILABLE, category: 21}, {status: SOLDOUT, category: 19}]

$.ajax({
  url: bta_obj.ajaxurl,
    data: {
      'action': 'get_checkfront_items',
      'arrive' : arrive,
      'depart' : depart,
      'categories' : categories,
    },
    type: "POST",
    success:function(data) {
    var json = $.parseJSON(data);
    $(json).each(function(i,val){
      $.each(val,function(k,v){
        // here is where the magic needs to happen      
      });
    });
   },
   error: function(errorThrown){
     alert('well darn it....');
   }
 });

There are div id's that match the category ids. So I first need to determine if the category id matches a div id and then append the status to that div id. Hope that makes sense.

Update

For those who can't see past simple typos in an example JSON response, I have added the brackets that were dearly required....

Your JSON is not in a valid form. It should have been [{status: AVAILABLE, category: 21}, {status: SOLDOUT, category: 19}] to be an array of status for each category. Then you have to show what your html looks like to figure out how to plug these values. — Nawed Khan
– Nawed Khan, Commented Oct 17, 2019 at 17:07
Not sure if I understand but $('#' + status).text(category); should work just fine. — Richard Cagle
– Richard Cagle, Commented Oct 17, 2019 at 20:21

Gosha_Fighten · Accepted Answer · 2019-10-17 20:27:21Z

1

Jquery provides the ID selector to obtain a DOM element by its ID and the text method to change the DOM element innerText.

$(json).each(function(i,val){
  $('#'+val.category).text(val.status);
});

edited Oct 17, 2019 at 20:27

answered Oct 17, 2019 at 20:21

Gosha_Fighten

3,8881 gold badge25 silver badges34 bronze badges

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

1 Comment

RiotAct Over a year ago

5 stars @gosha-fighten! Thanks for that. I was attempting some other ways but was putting too much into it. I like it. Clean and simple.

Collectives™ on Stack Overflow

Jquery, loop through AJAX JSON response and append to array of element ids

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related