根据使用 Javascript Map 或过滤器方法从复杂的 JSON 结构中选择 id 来显示国家/地区

Question

I have a JSON structure which is bit complex and I want to display the corresponding items based on the selection of Id. For example, in my JSON structure I have the sections of continent and under each continent countries are listed within the property names "Levels".So, I want to filter each continent based on the id from the "Levels" property. So, if the "Country.Level.Id === 6" it should display the Country.Name="America". I have been trying to make it work by using JavaScript Map and Filter method but couldn't make it work.

Here is my SandBox Link: https://codesandbox.io/s/dark-feather-ugvxv?file=/src/index.js:0-1294

The data:

const items = [
  {
    Country: [
      {
        Id: "1",
        Name: "Europe",
        Levels: [
          {
            Id: "1",
            Name: "Finland",
            DisplayName: "Finland"
          }
        ]
      },
      {
        Id: "1",
        Name: "ASIA",
        Levels: [
          {
            Id: "2",
            Name: "Bangladesh",
            DisplayName: "Bangladesh"
          },
          {
            Id: "3",
            Name: "India",
            DisplayName: "India"
          },
          {
            Id: "4",
            Name: "Pakistan",
            DisplayName: "Pakistan"
          }
        ]
      },
      {
        Id: "3",
        Name: "America",
        Levels: [
          {
            Id: "5",
            Name: "USA",
            DisplayName: "USA"
          },
          {
            Id: "6",
            Name: "Canada",
            DisplayName: "Canada"
          },
          {
            Id: "7",
            Name: "Australia",
            DisplayName: "Australia"
          }
        ]
      },
      {
        Id: "4",
        Name: "Africa",
        DisplayName: "Africa",
        Levels: [
          {
            Id: "8",
            Name: "Nigeria",
            DisplayName: "Nigeria"
          }
        ]
      }
    ]
  }
];

My coding attempt:

const selectById = "5";
const countries = items[0].Country;
const result = countries.filter(item => item.Levels.Id === selectById);
console.log(result);

Answer 1

According to your data structure, this function will find a continent from a country id:

function findContinentByCountryId(items, id) {
  return items[0].Country.find((continent) => {
    return continent.Levels.some(country => country.Id === id)
  })
}

You can test it with the snippet below:

 function findContinentByCountryId(items, id) { return items[0].Country.find((continent) => { return continent.Levels.some(country => country.Id === id) }) }

 <form> <label for="country-id">Country id:</label> <input id="country-id"> <input type="submit" value="Find continent by country id"> </form> <span></span> <script> const items = [ { Country: [ { Id: "1", Name: "Europe", Levels: [ { Id: "1", Name: "Finland", DisplayName: "Finland" } ] }, { Id: "1", Name: "ASIA", Levels: [ { Id: "2", Name: "Bangladesh", DisplayName: "Bangladesh" }, { Id: "3", Name: "India", DisplayName: "India" }, { Id: "4", Name: "Pakistan", DisplayName: "Pakistan" } ] }, { Id: "3", Name: "America", Levels: [ { Id: "5", Name: "USA", DisplayName: "USA" }, { Id: "6", Name: "Canada", DisplayName: "Canada" }, { Id: "7", Name: "Australia", DisplayName: "Australia" } ] }, { Id: "4", Name: "Africa", DisplayName: "Africa", Levels: [ { Id: "8", Name: "Nigeria", DisplayName: "Nigeria" } ] } ] } ]; const form = document.querySelector('form') const input = document.querySelector('input') const result = document.querySelector('span') form.addEventListener('submit', (event) => { event.preventDefault() const continent = findContinentByCountryId(items, input.value) result.textContent = continent? continent.Name: 'Continent not found' }) </script>

Side note

I don't know the context of your problem, but be aware that object properties are usually camelCased in javascript (instead of PascalCased in your case) and that Country and Levels might not be ideal names for the corresponding data. Furthermore, in case this wasn't intentional, Europe and Asia have the same id in your dataset.

Answer 2

You have to change your filter method appropriately it'll work

countries.filter(item => item.Levels.find(elem => elem.Id === selectById))

SandboxLink