CODEWITHSUNDEEP
jqueryobject
via8321
via8321

Reputation: 15

nested jquery $.each repeating iteration issue

hope you can help me with my issue, I'm iterating nested json using jquery $.each here's my sample code

function getList() {
 $.getJSON("src/list.json", function(data) {
  $.each(data, function( key, fax ) {
    const faxItem = this;
      displayOnDom.append(`<div id=faxPlan-${faxItem.id} class="pricing-table flex-item ${faxItem.recommended ? 'recommended' : ''}">
        <h3 class="pricing-title">${faxItem.title}</h3>
        <div class="price">${faxItem.price_per_month}<sup>/ month</sup></div>
        ${faxItem.button ? `<p class="rounded">${faxItem.button_text}</p>` : `<p class="norounded">${faxItem.button_text}</p>`}
        <div class="table-list"></div>
        `);
    $.each(fax.features, function( key, list ) {
      $('.table-list').append(`<p>${list.title}<span>${list.list}</span></p>`)
    })
  })   
});

}

I have a json file nested like this with multiple entries.

[{
"id": 1,
"title": "Pay-as-you-go",
"recommended": false,
"price_per_month": "$0.00",
"button": false,
"button_text":"For flexi-fax users, top up as you need with no lock-in contracts",
"icon": true,
"features": [{
        "title": "Send Credits Included",
        "list": "$0.30 Excess send credit charges "
    },
    {
        "title": "Received Credits Included",
        "list": "$0.30 Excess received credit charges "
    },
    {
        "title": "Free Fax Number",
        "list": ""
    }
],
"cta": {
    "label": "TRY FOR FREE",
    "link": "#"
}

},

My issue is that on the second $.each iteration, all of the features array are shown all together in the first iteration. It should be shown in their own iteration.

Hope my question's clear to you guys. Thanks in advance.

Upvotes: 0

Views: 32

Answers (2)

fdomn-m
fdomn-m

Reputation: 28611

You could return the newly created .table-list using .appendTo (rather than .append) so that it can be appended to:

function getList() {
 $.getJSON("src/list.json", function(data) {
  $.each(data, function( key, fax ) {
      const faxItem = this;
      displayOnDom.append(`<div id=faxPlan-${faxItem.id} class="pricing-table flex-item ${faxItem.recommended ? 'recommended' : ''}">
        <h3 class="pricing-title">${faxItem.title}</h3>
        <div class="price">${faxItem.price_per_month}<sup>/ month</sup></div>
        ${faxItem.button ? `<p class="rounded">${faxItem.button_text}</p>` : `<p class="norounded">${faxItem.button_text}</p>`}
        `);


      var tablelist = $('<div class="table-list"></div>').appendTo(displayOnDom);

      $.each(fax.features, function( key, list ) {
        tablelist.append(`<p>${list.title}<span>${list.list}</span></p>`)
      })
   })   
 });
}

Upvotes: 0

Carsten L&#248;vbo Andersen
Carsten L&#248;vbo Andersen

Reputation: 27041

One quick way to fix it is by adding :last to $('.table-list').

Currently the problem is that you are updating every table-list.

Solution 1 could be: $('.table-list:last')

Solution 1

var displayOnDom = $(".test");

var data = [{
    "id": 1,
    "title": "Pay-as-you-go",
    "recommended": false,
    "price_per_month": "$0.00",
    "button": false,
    "button_text": "For flexi-fax users, top up as you need with no lock-in contracts",
    "icon": true,
    "features": [{
        "title": "Send Credits Included",
        "list": "$0.30 Excess send credit charges "
      },
      {
        "title": "Received Credits Included",
        "list": "$0.30 Excess received credit charges "
      },
      {
        "title": "Free Fax Number",
        "list": ""
      }
    ],
    "cta": {
      "label": "TRY FOR FREE",
      "link": "#"
    }
  },
  {
    "id": 1,
    "title": "Pay-as-you-go",
    "recommended": false,
    "price_per_month": "$0.00",
    "button": false,
    "button_text": "For flexi-fax users, top up as you need with no lock-in contracts",
    "icon": true,
    "features": [{
        "title": "Send Credits Included",
        "list": "$0.30 Excess send credit charges "
      },
      {
        "title": "Received Credits Included",
        "list": "$0.30 Excess received credit charges "
      },
      {
        "title": "Free Fax Number",
        "list": ""
      }
    ],
    "cta": {
      "label": "TRY FOR FREE",
      "link": "#"
    }
  }
]

$.each(data, function(key, fax) {
  const faxItem = this;
  displayOnDom.append(`<div id=faxPlan-${faxItem.id} class="pricing-table flex-item ${faxItem.recommended ? 'recommended' : ''}">
        <h3 class="pricing-title">${faxItem.title}</h3>
        <div class="price">${faxItem.price_per_month}<sup>/ month</sup></div>
        ${faxItem.button ? `<p class="rounded">${faxItem.button_text}</p>` : `<p class="norounded">${faxItem.button_text}</p>`}
        <div class="table-list"></div>
        `);
  $.each(fax.features, function(key, list) {
    $('.table-list:last').append(`<p>${list.title}<span>${list.list}</span></p>`)
  })
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="test"></div>

Solution 2

$.each(data, function(key, fax) {
  const faxItem = this;
  var t = $(`<div id=faxPlan-${faxItem.id} class="pricing-table flex-item ${faxItem.recommended ? 'recommended' : ''}">
        <h3 class="pricing-title">${faxItem.title}</h3>
        <div class="price">${faxItem.price_per_month}<sup>/ month</sup></div>
        ${faxItem.button ? `<p class="rounded">${faxItem.button_text}</p>` : `<p class="norounded">${faxItem.button_text}</p>`}
        <div class="table-list"></div>
        `);
  $.each(fax.features, function(key, list) {
    $(t).find('.table-list').append(`<p>${list.title}<span>${list.list}</span></p>`)
  })
  displayOnDom.append(t);
})


var displayOnDom = $(".test");

var data = [{
    "id": 1,
    "title": "Pay-as-you-go",
    "recommended": false,
    "price_per_month": "$0.00",
    "button": false,
    "button_text": "For flexi-fax users, top up as you need with no lock-in contracts",
    "icon": true,
    "features": [{
        "title": "Send Credits Included",
        "list": "$0.30 Excess send credit charges "
      },
      {
        "title": "Received Credits Included",
        "list": "$0.30 Excess received credit charges "
      },
      {
        "title": "Free Fax Number",
        "list": ""
      }
    ],
    "cta": {
      "label": "TRY FOR FREE",
      "link": "#"
    }
  },
  {
    "id": 1,
    "title": "Pay-as-you-go",
    "recommended": false,
    "price_per_month": "$0.00",
    "button": false,
    "button_text": "For flexi-fax users, top up as you need with no lock-in contracts",
    "icon": true,
    "features": [{
        "title": "Send Credits Included",
        "list": "$0.30 Excess send credit charges "
      },
      {
        "title": "Received Credits Included",
        "list": "$0.30 Excess received credit charges "
      },
      {
        "title": "Free Fax Number",
        "list": ""
      }
    ],
    "cta": {
      "label": "TRY FOR FREE",
      "link": "#"
    }
  }
]

$.each(data, function(key, fax) {
  const faxItem = this;
  var t = $(`<div id=faxPlan-${faxItem.id} class="pricing-table flex-item ${faxItem.recommended ? 'recommended' : ''}">
        <h3 class="pricing-title">${faxItem.title}</h3>
        <div class="price">${faxItem.price_per_month}<sup>/ month</sup></div>
        ${faxItem.button ? `<p class="rounded">${faxItem.button_text}</p>` : `<p class="norounded">${faxItem.button_text}</p>`}
        <div class="table-list"></div>
        `);
  $.each(fax.features, function(key, list) {
    $(t).find('.table-list').append(`<p>${list.title}<span>${list.list}</span></p>`)
  })
  displayOnDom.append(t);
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="test"></div>

Upvotes: 3

Related Questions