有没有办法对 Javascript 中的数组中的每个奇数和偶数 object 进行排序？

Question

I need to be able to append every even object on the left side of a vertical line, and every odd object on the right side. I am not sure how I can achieve this. Sample of the JSON, (This is just dummy data for now) (url)

[{
        "Year": 2010,
        "Title": "Cadillac",
        "Description": "Escalade ESV"
    },
    {
        "Year": 1998,
        "Title": "Volvo",
        "Description": "V70"
    },
    {
        "Year": 1992,
        "Title": "Toyota",
        "Description": "Camry"
    },
    {
        "Year": 2012,
        "Title": "Ford",
        "Description": "Explorer"
    }]

Heres my code:

fetch(url)
.then(result => {
  return result.json();
})
.then (data =>{
  console.log(data);
  data.forEach( (point) => {
      const appendToHtml =  `
      <div class="container left">
            <div class="content">
                <h2>${point.Title}</h2>
                <p>${point.Description}</p>
                <p>${point.Year}</p>
            </div>
        </div>
        <div class="container right">
            <div class="content">
                <h2>${point.Title}</h2>
                <p>${point.Description}</p>
                <p>${point.Year}</p>
            </div>
        </div>
            `;
      $(".timeline").append(appendToHtml);
    });
  })

The issue is it append on the left AND the right. Click here for an image of the issue. I need to alternate for example Cadillac on the left, Volva on the right etc... I cant seem to figure out what to do..

Thanks in advance!

Answer 1

You can calculate the odd or even of car index and based on that apply class left and right .

data.forEach( (point, index) => {
  const isOdd = index % 2;
  const appendToHtml =  `
  <div class="container ${isOdd ? 'right' : 'left' }">
        <div class="content">
            <h2>${point.Title}</h2>
            <p>${point.Description}</p>
            <p>${point.Year}</p>
        </div>
    </div>`;
  $(".timeline").append(appendToHtml);
});

Answer 2

Here you go with a solution

 fetch(url).then(result => { return result.json(); }).then (data =>{ console.log(data); data.forEach( (point, i) => { const appendToHtml = ` <div class=`container ${i%2 === 0? "right": "left" }`> <div class="content"> <h2>${point.Title}</h2> <p>${point.Description}</p> <p>${point.Year}</p> </div> </div> `; $(".timeline").append(appendToHtml); }); })

Use template literal for finding odd even using mod function