Как построить такой список, получив данные из массива объектов?

Question

[Евгений Журов]

Добрый день, задача в следующем:
Есть json, из которого нужно получить определенные данные и сформировать с ними список. Упрощенно выглядит так:

[
    "location": {
        "country": {
            "name": "Finland", "id": "FI"
        },
        "city":"Helsinki"
    },
    "location": {
        "country": {
            "name": "Russia", "id": "RU"
        },
        "city":"Helsinki"
    }
]

Объектов с ключом location может быть много, страны и города в них - могут быть разными, т.е. в одном location.country.name = "Finland" может быть location.city = "Helsinki", а в другом - "Jyväskylä" и т.д. То же самое касается прочих возможных стран.

Проще говоря, мы можем иметь Финляндию с несколькими городами, Россию с несколькими городами, Швецию... и т.д.

Необходимо на основе подобного json сформировать неповторяющиеся списки с подсписками, вида:

• Finland
  • Helsinki
  • Jyväskylä
    
  
  
• Russia
  • Moscow
  • Volgograg
  
  
• Country(n)
  • City(n1)
  • City(nX)
  
  

То есть, если название страны уже встречалось в цикле, то мы его не выводим, но если, например, в этом же объекте присутствует город этой страны, которого доселе не было - то добавляем город в список этой страны.

Как лучше всего реализовать подобное?

Answer 1

[alex]

https://jsfiddle.net/kh2b4Lpz/

json

let json = [
  {"location": {
    "country": {
      "name": "Finland"
    },
    "city":"Helsinki"
  }},
  {"location": {
    "country": {
      "name": "Russia",
    },
    "city":"Moscow"
  }},
  {"location": {
    "country": {
      "name": "Russia",
    },
    "city":"Novgorod"
  }},
  {"location": {
    "country": {
      "name": "USA",
    },
    "city":"Boston"
  }},
  {"location": {
    "country": {
      "name": "Russia",
    },
    "city":"Ufa"
  }},
  {"location": {
    "country": {
      "name": "Australia",
    },
    "city":"Sidney"
  }}
];

js

let wow = {
  db: {},

  parse(data) {
    data.forEach(function({location: {country: {name: country}, city}} = node){
      !this.db[country] ? (this.db[country] = {}, this.db[country][city] = true) : this.db[country][city] = true;
    }, this);
    return this;
  },

  render() {
    function renderList(data) {
      return `<ul>${renderCountries(data)}</ul>`
    }

    function renderCountries(data, html = '') {
      Object.keys(data).forEach(country => html += `<li>${country}<ul>${renderCities(data[country])}</ul></li>`);
      return html;
    }

    function renderCities(data, html = '') {
      Object.keys(data).forEach(city => html += `<li>${city}</li>`);
      return html;
    }
    
    return `<ul>${renderList(this.db)}</ul>`;
  }
};

document.querySelector('body').innerHTML = wow.parse(json).render();

render

Answer 2

[Манучехр Жалолов]

Код

let arr = 
[
	{
		"location":{
			"country":{
				"name":"Finland",
				"id":"FI"
			},
			"city":"Helsinki"
		}
	},
	{
		"location":{
			"country":{
				"name":"England",
				"id":"FI"
			},
			"city":"London"
		}
	},
	{
		"location":{
			"country":{
				"name":"Russian",
				"id":"RU"
			},
			"city":"Moskow"
		}
	},
	{
		"location":{
			"country":{
				"name":"Russian",
				"id":"RU"
			},
			"city":"Saint Petersburg"
		}
	},
	{
		"location":{
			"country":{
				"name":"Russian",
				"id":"RU"
			},
			"city":"Sevastopol"
		}
	},
];
let all = [];
let bool = true;
for (var i = 0; i < arr.length; i++) {
	for (var n = 0; n  <= all.length; n++) {
		if(all.length == 0) all.push({"country":arr[i].location.country.name,"city":[arr[i].location.city]});
		bool = true;
		for (var d = 0; d < all.length; d++) {
			if(all[d].country==arr[i].location.country.name){
				bool = false;
				if(all[d].city.indexOf(arr[i].location.city)<0)all[d].city.push(arr[i].location.city);
			};
		}
		if(bool)all.push({"country":arr[i].location.country.name,"city":[arr[i].location.city]});
	}
}
console.log(all)

знаю много чего смешной но рабочий код вот дебаг

консоль

[
    {
        country: 'Finland',
        city: ['Helsinki']
    },
    {
        country: 'England',
        city: ['London']
    },
    {
        country: 'Russian',
        city: ['Moskow', 'Saint Petersburg', 'Sevastopol']
    }
]