How to loop through an array in an Ajax data response with Jquery?

See also questions close to this topic

• How to devise this solution to Non-Constructible Change challenge from Algoexpert.io

  I'm working through algoexpert.io coding challenges and I'm having trouble undersatnding the suggested solution to one of the questions titled Non-Constructible Change

  Here's the challenge question:

  Given an array of positive integers representing the values of coins in your possession, write a function that returns the minimum amount of change (the minimum sum of money) that you cannot create. The given coins can have any positive integer value and aren't necessarily unique (i.e., you can have multiple coins of the same value).

  For example, if you're given coins = [1, 2, 5], the minimum amount of change that you can't create is 4. If you're given no coins, the minimum amount of change that you can't create is 1.

  // O(nlogn) time, O(n) size.
  function nonConstructibleChange(coins) {
    coins = coins.sort((a, b) => a - b); // O(nlogn) time operation
    let change = 0;
  
    for (coin of coins) {
      if (coin > change + 1) return change + 1;
      change += coin;
    }
  
    return change + 1;
  }
  

  My problem

  I am not completely sure how did the author of the solution come up with the intuition that

  if the current coin is greater than `change + 1`, the smallest impossible change is equal to `change + 1`.
  

  I can see how it tracks, and indeed the algorithm passes all tests, but I'd like to know more about a process I could use to devise this rule.

  Thank you for taking the time to read the question!
• My document is not defined because of lost context

  Working with vanilla.js and my code looks like this:

  class Restaurant {
    constructor() {
      this.menu = [];
      this.categories = ['all'];
    }
    handleSearch(event) {
      const searchInput = document.querySelector('.search-input');
      const minPriceInput = document.querySelector('.min-price');
      const maxPriceInput = document.querySelector('.max-price');
      if (event.target.matches('.search-btn')) {
        event.preventDefault();
        const keyword = searchInput.value.toLowerCase();
        const minPrice = minPriceInput.value || 0;
        const maxPrice = maxPriceInput || Infinity;
        let category = docuemnt.querySelector(".filter-active").dataset.id;
        let filteredMenu = [];
        if (category === this.categories[0]) { // categories[0] is "all";
          filteredMenu = menu.filter(item => {
            return item.title.includes(keyword) && item.price >= minPrice && item.price <= maxPrice;
          })
          this.renderMenu(filteredMenu);
        } else {
          filteredMenu = menu.filter(item => {
            return item.category === selectedCategory && item.title.includes(keyword) && item.price >= minPrice && item.price <= maxPrice;
          })
          this.renderMenu(filteredMenu);
        }
      }
    }
    render() {
      const buttonsContainer = document.querySelector('.btn-container');
      const searchButton = document.querySelector('.search-btn');
      buttonsContainer.addEventListener('click', this.handleFilter.bind(this));
      searchButton.addEventListener('click', this.handleSearch.bind(this));
      this.setCategories();
      this.renderButtons();
      this.renderMenu(this.menu);
    }
  }
  

  my document object is undefined inside the handleSearch method. Is it possible to solve this problem without placing all element variables outside the method? Even if I do so I have another variable "categories" which is using document object.
• React-dnd multiple elements

  I can make react-dnd drag easily having a single element to drag over however I have array of 4 fields I'd like to make draggable. In my example code down below it creates four boxes from mapping the array and each box has a className of 'element'. Which should make them all draggable however they won't move.

  Here is my drag code:

   const ELEMENT = 'element';
      const [{ isDragging }, drag, dragPreview] = useDrag(() => ({
        type: ELEMENT,
        collect: (monitor) => ({
          isDragging: monitor.isDragging()
        })
      }))
  

  Here is my draggable element:

   {FieldDetail.map((e,i) =>  
     <div key={i} ref={dragPreview} style={{ opacity: isDragging ? 0.5 : 1}}>
          <div className='element' ref={drag}></div>            
      </div>          
    )} 
  

  Any ideas? Do I need to do something more within the type or className?
• Jqgrid data not showing in table, but the data is coming via URL in the console, but it is now showing up in the table

  

  I have been trying to setup jqgrid in a new project, everything works, but the data doesn't show up, what I mean by everything works is that, the data which I am fetching via backend, it is showing up in the console, and it is also showing in the pagination also.

  Please check the link below: you can check the source code too.

  http://globalaskit.com/dev/hms/manageCountry

  Thanks in advance.
• Clear Event ID and call a new one without refreshing the page

  I'm parsing array of events from mysql and list them into a landing page. The user can click a button to send a message to the event organizer. The user should login before sending the email so I sent the event ID with the http request and return it back when session is sent than call via ajax to populate the modal and send the message. Everything is going fine until now however the user should reload the page to clear the last event id and call a new one all over again.

  Below is the code where I set data-jid="<?= $jid; ?>" where it set the event id attached to the button and send it via http request once redirected to the login page

                      <?php if ($this->session->userdata('is_user_login')) : ?>
                          <button type="button" class="btn btn-secondary btn-block rounded contactBiz" data-toggle="modal" data-jid="<?= $jid; ?>"  data-target="#modalApply"><?=trans('apply')?></button>
                      <?php  else:
                          $last_request_page = (isset($_SERVER['HTTPS']) ? "https" : "http") . "://$_SERVER[HTTP_HOST]$_SERVER[REQUEST_URI]";
  
                          $this->session->set_userdata('last_request_page', $last_request_page); 
                      ?>
                          <a href="<?= base_url(); ?>auth/login?id=<?= $jid; ?>" data-jid="<?= $jid; ?>" class="btn btn-secondary btn-block rounded preapply"><?=trans('apply')?></a>
                      <?php endif; ?>
  

  In the login page I've set the session of the event id as following:

  <?php
      if(isset($_GET['id'])) {
          $this->session->set_userdata('event_id', $_GET['id']);
      }
  ?>
  

  Now after the user redirects back the last clicked button will be populated to send the message using below javascript call.

  <?php if (!empty($this->session->userdata('event_id'))) {
      $sID = $this->session->userdata('event_id'); ?>
  
      $(document).ready(function(){
          $(".contactBiz").trigger("click");
      });
  
  <?php } ?>
  <?php if ($this->session->userdata('is_user_login')) : ?>
          $('.contactBiz').click(function(e){
              e.preventDefault();
              var id;
              var csrfName = '<?php echo $this->security->get_csrf_token_name();?>';
              var csrfHash = '<?php echo $this->security->get_csrf_hash();?>';
  
              var data = {
              <?php if (!empty($this->session->userdata('event_id'))) { ?>
                  id: <?= $sID; ?>,
              <?php } else { ?>
                  id: $(this).attr('data-jid'),
              <?php } ?>
                  uid: <?= $this->session->userdata('user_id'); ?>,
              };
              data[csrfName] = csrfHash;
  
              $.ajax({
                  cache: false,
                  url: base_url + 'job-data',
                  dataType: 'json',
                  type: 'POST',
                  data: data,
                  error: function(jqXHR, textStatus, errorThrown) {
                      alert('Something is wrong');
                  },
                  success: function(data) {
                      console.log(data);
                      $("#subject").val(data[0].title);
                      $(".messageTitle").empty().append( " <?= trans('message'); ?> " + data[0].name + " about " + data[0].title );
                      p1 = data[0].business_id;
                      p2 = data[0].email;
                      <?php $this->session->unset_userdata('event_id'); ?>
                  } 
              }); 
  
          });
  <?php endif; ?>
  

  Now everything as said is fine, the last clicked button is populated using the event id data-jid="<?= $jid; ?>" but what happens next the user got stuck with the same event id repeated for all buttons.

  The solution I used in the ajax call to define the id as below:

          <?php if (!empty($this->session->userdata('event_id'))) { ?>
              id: <?= $sID; ?>,
          <?php } else { ?>
              id: $(this).attr('data-jid'),
          <?php } ?>
  

  And after the successful ajax response I'm clearing the session as set below:

              <?php $this->session->unset_userdata('event_id'); ?>
  

  I think my mistake is here however I couldn't find any better solution, your advice is highly appreciated thank you!
• If I scroll, I want to add a class in a few seconds. What should I do?

  I'm working on 'addClass' when I scroll.

  If I scroll down a little bit, the class will be added to the two div. It is correct that one('post-cover') is added immediately after scrolling. But I'd like the other one('post-box') to be added in about 2 seconds.

  <script>
        $(document).ready(function() {
          $(window).scroll(function(){
              if(window.scrollY<=100){
                $('.post-cover').addClass('stop');
                 $('.post-cover').removeClass('move');
                 $('.post-box').removeClass('scroll');
  
              } else {
                 $('.post-cover').addClass('move');
                 $('.post-cover').removeClass('stop');
                 setTimeout(function() { 
                  $('.post-box').addClass('scroll');}, 4000);
              }
          });
        });
  
  
  </script>
• Adding/updating nested object in React

  I'm learning React as I work on this app. I'm having hard time figuring out how to add and update injury details. Currently multiple employees, customers, and others can be added. I want to add injury details for each one of these fields that can have multiple values. This is what I have

   <br/>
  involvements {<br/>
  employees : name,<br/>
  customers: [ id, firstName, lastName],<br/>
  others: name<br/>
  }<br/>
  

  This is what I want

  involvements {<br/>
  employees : [name, injuryInfo: {id, injuryOrfatality, ageRange, location}]<br/>
  customers: [ id, firstName, lastName, injuryInfo: {id, injuryOrfatality, ageRange, location}],<br/>
  others: [name, injuryInfo: {id, injuryOrfatality, ageRange, location}]<br/>
  }<br/>
  

  incident.reducer.js

  function transformIncident(incident, files = []) {
    return {
      status: incident.status,
      involvements: {
        employees: incident.involvedEmployees.map(e => e.name),
        customers: incident.involvedCustomers.map(c => c.customer),
        others: incident.involvedOthers.map(o => o.name)
      },
  }<br/>
  I want to add the radio buttons to indicate whether there's an injury or fatality. Then if either is selected show the rest of the fields.
  

  viewIncident.js

   function handleInvolvementAdd(field, value) {
        dispatch({
        type: ADD_INVOLVEMENT,
        payload: { field, value }
      });
    }
  
  <div className="form-group">
     <label htmlFor="involvedEmployees">Employees</label>
          <div className="input-group">
              <input
               className="form-control"
               id="involvedEmployees"
               name="employees"
               onChange={handleInvolvementTextChange}
               type="text"
               value={state.ui.involvements.employees}
                />
  
              <div className="input-group-append">
                 <button
                 className="btn btn-outline-secondary"
                 onClick={() =>
                 handleInvolvementAdd("employees",
                 state.ui.involvements.employees
                           )}
                 type="button"
                 >ADD
                 </button>
              </div>
           </div>
  </div>
  
  {state.incident.involvements.employees.length > 0 && (
      <ul className="list-group add-incident__involvements">
        {state.incident.involvements.employees.map((e) => (
           <div key={e.name}>
             <li className="list-group-item d-flex flex-column justify-content-between">
                <div> {e.name}
                  <button
                   className="close"
                   onClick={() => handleInvolvementDelete("employees", e)}
                   type="button"
                   >
                     &times;
                   </button>
                  </div>
                                
   {state.incident.involvements.employees.injury.map((i) => (
        <div key={i.injuryId}>
         <div className="dropdown-divider"></div>
  
        <div className="form-check form-check-inline">
         <input
         className="form-check-input"
         type="radio"
         name= "fatalityOrInjury"
         value=""
         checked={i.fatalityOrInjury === ""}
         onChange={handleInjuryChange}
         />
         <label className="form-check-label">
         N/A
         </label>
         </div>
         <div className="form-check form-check-inline">
            <input
             className="form-check-input"
             type="radio"
             name="fatalityOrInjury"
             checked={i.fatalityOrInjury === "Fatality"}
             value="Fatality"
             onChange={handleInjuryChange}
             />
             <label className="form-check-label">
             Fatality
             </label>
             </div>
             <div className="form-check form-check-inline">
               <input
                className="form-check-input"
                type="radio"
                name="fatalityOrInjury"
                checked={i.fatalityOrInjury === "Injury"}
                value="Injury"
                onChange={handleInjuryChange}
                />
                <label className="form-check-label">
                Injury
                </label>
                </div>
                </div>))}
                           
                 </li>
           </div>
            ))}
          </ul>
         )}
  
• React: Mapping through and rendering from nested object

  I am currently trying to loop through a nested object and then map values from there but it is not rendering.

  Object {
    "classTags": Object {
      "Test Class v2": "f4e2754d-90e5-4904-b9b7-af6c7e66f4ff",
    },
    "termTags": Object {},
    "userTags": Object {
      "User tag": "bbb658b9-e897-4e6c-b949-bc6db64dff3d",
    },
  }
  

  My current code looks like so:

  {Object.keys(taskTags).forEach((key) => {
      Object.keys(taskTags[key]).map((task) => (
           <View
                style={{
                    backgroundColor: colors.primary,
                    padding: 6,
                    paddingRight: 10,
                    borderRadius: 8,
                    display: "flex",
                    flexDirection: "row",
                    alignItems: "center",
                    marginRight: 0,
                    marginBottom: 6,
                }}
           >
           <Text
               style={{
                   fontSize: 16,
                   color: colors.light,
                   fontWeight: "bold",
                   marginRight: 10,
               }}
           >
               {task}
           </Text>
           <TouchableOpacity
               onPress={() => {          
                   console.log("do something");
               }}
           >
               <Icon name="times" size={16} color={colors.light} />
           </TouchableOpacity>
       </View>
   ));
  })}
  

  Because it is not rendering I am guessing that I am implementing the mapping incorrectly but when using the same logic to console.log the object it is correctly printing.

  What am I doing wrong here?
• How can i create object from to arrays such as on example

  const values = ['red', 'green', 'yellow', 'white', 'x', 'x-large'];
  
  const props = ['color', 'size'];
  

  result

  {
  color: [
      'red', 'green', 'yellow', 'white'
      ],
  size: [
          'x', 'x-large'
      ]
  }