Как изменить div, используя данные из JSON

Question

Я новичок в JavaScript, и недавно я получил задание отобразить несколько стран и некоторую информацию о них на HTML с использованием JSON. Поскольку я все еще новичок, я хотел бы знать, как это сделать, используя .map, а не .append или $.

<div class="country">
    <div class="name"></div>
    <img src="" alt="">
    <div class="description"></div>
    <div class="area"></div>
    <div class="continent"></div>
  </div>

let countries = [
  { name: "Russia",
    description: "russia description",
    area: "17,098,246 km2",
    image: "./flags/Russia.png",
    continent: "Europe",
  },

  { name: "China",
    description: "china description",
    area: "9,596,961 km2",
    image: "./flags/China.png",
    continent: "Asia",
  },

  { name: "India",
    description: "india description",
    area: "3,287,263 km2",
    image: "./flags/India.png",
    continent: "Asia",
  },
  
  { name: "United States",
    description: "usa description",
    area: "9,833,520 km2",
    image: "./flags/USA.png",
    continent: "North America.",
  },
];

Answer 1

вот простой способ сделать это, мы используем итератор foreach для циклического цикла массива объектов, которые у вас есть (страны), а затем для каждого элемента (страны) мы создадим элементы html и добавим их непосредственно в body в данном случае я оставил исходное форматирование, чтобы вы могли лучше понять. пс. использование .map здесь не имеет смысла, так как вам не нужно изменять какую-либо информацию

countries.forEach(country => {
  document.body.innerHTML += 
  '<div class="country">' +
    '<div class="name">' + country.name + '</div>' +
    '<img src="' + country.image + '" alt="">' +
    '<div class="description">' + country.description + '</div>' + 
    '<div class="area">' + country.area + '</div>' +
    '<div class="continent">' + country.continent + '</div>' +
  '</div>'
});