JavaScript - создание строки с разделителями-запятыми из поиска в сильно вложенном массиве

Я создаю приложение для перетаскивания, которому предоставляется многомерный массив поддерживаемых типов файлов и заголовков для этих типов файлов и значков, которые можно использовать против них в легенде. Перетаскивание выбирает массив принятия, который имеет определенные типы mime - мне нужно простым языком показать пользователю, какие типы файлов разрешены - поэтому верните строку с разделителями-запятыми - jpg, pdf

как лучше всего пройти через многомерный массив, чтобы получить ключ в формах для выполнения этой задачи?

  getAcceptedFileTypes(){

let supportedFiles = [{
  "images": {
    "icon": <ImageIcon />,
    "formats": [{"png": "image/png"}, {"jpeg": "image/jpeg"}],
  }
},{
  "compressed_files": {
    "icon": <DescriptionIcon />,
    "formats": [{"zip": "application/x-zip-compressed"}, {"rar": "application/x-rar-compressed"}],
  }
},{
  "documents": {
    "icon": <FileCopyIcon />,
    "formats": [{"pdf": "application/pdf"}, {"docx": "application/msword"}, {"doc": "application/vnd.openxmlformats-officedocument.wordprocessingml.document"}],
  }
}];

let accept = ["application/pdf","image/jpeg"]

    console.info("supportedFiles", supportedFiles);
    console.info("accept", accept);


    let acceptedFiles = "jpeg, pdf";

    return (
      acceptedFiles
    )
  }

Если возможно, вы должны изменить структуру на что-то вроде { name: "pdf", MIMEtype: "application/pdf" }. Фильтровать с динамическими именами ключей сложнее. Кроме того, это позволит вам добавить больше свойств, если это необходимо, например, "MaxAllowedSize" для загрузки и т. д.

— 10.12.2020 15:43

Что это за рамки? Пожалуйста, отметьте

— 10.12.2020 15:44

либо следуйте тому, что предлагает @adiga, либо преобразуйте supportedFiles в объект, чтобы вы могли использовать Object.keys() для прокрутки

— 10.12.2020 15:46

Структура данных не соответствует ванильному JavaScript. Так что парсить/фильтровать его с помощью ванильного JavaScript будет довольно сложно.

— 10.12.2020 15:47

но - supportFiles - это массив объектов - он также дополняет легенду информацией о значке

— 10.12.2020 15:48

как мне реорганизовать поддерживаемые файлы как объект - поместите «имя: изображение» в качестве свойства, которое вы имеете в виду

— 10.12.2020 15:49

let supportedFiles = {   "images": {     "icon": <ImageIcon />,     "formats": [{"png": "image/png"}, {"jpeg": "image/jpeg"}],   },   "compressed_files": {     "icon": <DescriptionIcon />,     "formats": [{"zip": "application/x-zip-compressed"}, {"rar": "application/x-rar-compressed"}],   },   "documents": {     "icon": <FileCopyIcon />,     "formats": [{"pdf": "application/pdf"}, {"docx": "application/msword"}, {"doc": "application/vnd.openxmlformats-officedocument.wordprocessin‌gml.document"}],   } };

— 10.12.2020 15:57

javascript arrays reactjs

10.12.2020 15:38

Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией

В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.

Концепция локализации и ее применение в приложениях React ⚡️

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

Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer

В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...

Безумие обратных вызовов в javascript [JS]

Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...

Система управления парковками с использованием HTML, CSS и JavaScript

Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...

JavaScript Вопросы с множественным выбором и ответы

Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...

129

Перейти к ответу Данный вопрос помечен как решенный

Ответы 5

Вы имеете в виду это?

const getAcceptedFileTypes = () => {

  let supportedFiles = [{
    "images": {
      "icon": `<ImageIcon />`,
      "formats": [{
        "png": "image/png"
      }, {
        "jpeg": "image/jpeg"
      }],
    }
  }, {
    "compressed_files": {
      "icon": `<DescriptionIcon />`,
      "formats": [{
        "zip": "application/x-zip-compressed"
      }, {
        "rar": "application/x-rar-compressed"
      }],
    }
  }, {
    "documents": {
      "icon": `<FileCopyIcon />`,
      "formats": [{
        "pdf": "application/pdf"
      }, {
        "docx": "application/msword"
      }, {
        "doc": "application/vnd.openxmlformats-officedocument.wordprocessingml.document"
      }],
    }
  }];



  let acceptedFiles = supportedFiles.flatMap(file => file[Object.keys(file)[0]].formats)

  return (
    acceptedFiles
  )
}

console.info(getAcceptedFileTypes())

console.info(getAcceptedFileTypes().map(entry => Object.keys(entry)[0]).join(","))

нет - я имею в виду взять принятый массив - что перетаскивание тоже чувствительно - посмотреть на поддерживаемый массив - и выбрать ключи типа файла - отображая его в виде списка с разделителями-запятыми - например png, jpg, zip

— 10.12.2020 15:51

let acceptFiles = "jpeg, pdf"; -- это демонстрация того, что я хочу, чтобы acceptFiles стал

— 10.12.2020 15:52

См. последний console.info

— 10.12.2020 15:54

верно -- но речь шла о сравнении массива mimetypes -- с полным списком поддержки в многомерном массиве там

— 10.12.2020 16:18

10.12.2020 15:49

Может попробовать это

let supportedFiles = [{
  "images": {
    "icon": '<ImageIcon />',
    "formats": [{"png": "image/png"}, {"jpeg": "image/jpeg"}],
  }
},{
  "compressed_files": {
    "icon": '<DescriptionIcon />',
    "formats": [{"zip": "application/x-zip-compressed"}, {"rar": "application/x-rar-compressed"}],
  }
},{
  "documents": {
    "icon": '<FileCopyIcon />',
    "formats": [{"pdf": "application/pdf"}, {"docx": "application/msword"}, {"doc": "application/vnd.openxmlformats-officedocument.wordprocessingml.document"}],
  }
}];

let acceptedFiles=[];
supportedFiles.forEach((fileType)=>{
  Object.keys(fileType).forEach(key=>{
    fileType[key].formats.forEach(format=>{
      acceptedFiles.push(Object.keys(format));
   })
 })
})
console.info(acceptedFiles.join(","))

Если изменить структуру, то:

let supportedFilesObj  = {
  "images": {
    "icon": '<ImageIcon />',
    "formats": [{"png": "image/png"}, {"jpeg": "image/jpeg"}],
  },
  "compressed_files": {
    "icon": '<DescriptionIcon />',
    "formats": [{"zip": "application/x-zip-compressed"}, {"rar": "application/x-rar-compressed"}],
  },
  "documents": {
    "icon": '<FileCopyIcon />',
    "formats": [{"pdf": "application/pdf"}, {"docx": "application/msword"}, {"doc": "application/vnd.openxmlformats-officedocument.wordprocessingml.document"}],
  }
};

let acceptedFiles=[];
Object.keys(supportedFilesObj).forEach((key)=>{
    supportedFilesObj[key].formats.forEach(format=>{
      acceptedFiles.push(Object.keys(format));
   })
})
console.info(acceptedFiles.join(","))

10.12.2020 15:55

Если это повторяющаяся операция, вы можете создать объект сопоставления, который сопоставляет каждый тип MIME с его именем расширения файла.

const mapper = {}

for (const file of supportedFiles) {
  const { formats } = Object.values(file)[0]
  for (const format of formats) {
    const [key, value] = Object.entries(format)[0]
    mapper[value] = key;
  }
}

function getAcceptedFiles(accept, mapper) {
  return accept.map(t => mapper[t])
}

Объект карты:

{
  "image/png": "png",
  "image/jpeg": "jpeg",
  "application/x-zip-compressed": "zip",
  "application/x-rar-compressed": "rar",
  "application/pdf": "pdf",
  "application/msword": "docx",
  "application/vnd.openxmlformats-officedocument.wordprocessingml.document": "doc"
}

Вот фрагмент:

const supportedFiles=[{images:{icon:"",formats:[{png:"image/png"},{jpeg:"image/jpeg"}],}},{compressed_files:{icon:"",formats:[{zip:"application/x-zip-compressed"},{rar:"application/x-rar-compressed"}],}},{documents:{icon:"",formats:[{pdf:"application/pdf"},{docx:"application/msword"},{doc:"application/vnd.openxmlformats-officedocument.wordprocessingml.document"}],}}];

const mapper = {}

for (const file of supportedFiles) {
  const { formats } = Object.values(file)[0]
  for (const format of formats) {
    const [key, value] = Object.entries(format)[0]
    mapper[value] = key;
  }
}

function getAcceptedTypes(accept, mapper) {
  return accept.map(t => mapper[t])
}

console.info( getAcceptedTypes( ["application/pdf","image/jpeg"], mapper) )
console.info( getAcceptedTypes( ["application/x-rar-compressed"], mapper) )

10.12.2020 15:56

Вот простое решение с использованием 3 вложенных циклов for.

function getAcceptedFileExtensions() {
    let acceptedExtensions = [];

    for (let fileTypeObject of supportedFiles) {
        for (let fileTypeKey of Object.keys(fileTypeObject)) {
            for (let extensionPair of fileTypeObject[fileTypeKey].formats) {
                acceptedExtensions.push(Object.keys(extensionPair)[0]);
            }
        }
    }

    return acceptedExtensions;
}

console.info(getAcceptedFileExtensions().toString());

Структура данных немного странная, так как она содержит массив объектов, содержащих один ключ, который, кажется, является именем каждого объекта, а не, например. объект с различными категориями типов файлов напрямую. Из-за этого второй цикл можно сократить до Object.keys(fileTypeObject)[0]:

const supportedFiles = [
    {
        "images": {
            "icon": "<ImageIcon />",
            "formats": [
                { "png": "image/png" }, 
                { "jpeg": "image/jpeg" }
            ],
        }
    }, 
    {
        "compressed_files": {
            "icon": "<DescriptionIcon />",
            "formats": [
                { "zip": "application/x-zip-compressed" }, 
                { "rar": "application/x-rar-compressed" }
            ],
        }
    }, 
    {
        "documents": {
            "icon": "<FileCopyIcon />",
            "formats": [
                { "pdf": "application/pdf" }, 
                { "docx": "application/msword" }, 
                { "doc": "application/vnd.openxmlformats-officedocument.wordprocessingml.document" }
            ],
        }
    }
];


function getAcceptedFileExtensions() {
    let acceptedExtensions = [];

    for (let fileTypeObject of supportedFiles) {
        let fileTypeKey = Object.keys(fileTypeObject)[0];
        for (let extensionPair of fileTypeObject[fileTypeKey].formats) {
            acceptedExtensions.push(Object.keys(extensionPair)[0]);
        }
    }

    return acceptedExtensions;
}

console.info(getAcceptedFileExtensions().toString());

10.12.2020 16:11

Ответ принят как подходящий

Вы можете сделать что-то вроде:

let supportedFiles = [{
  "images": {
    "icon": "<ImageIcon />",
    "formats": [{
      "png": "image/png"
    }, {
      "jpeg": "image/jpeg"
    }],
  }
}, {
  "compressed_files": {
    "icon": "<DescriptionIcon />",
    "formats": [{
      "zip": "application/x-zip-compressed"
    }, {
      "rar": "application/x-rar-compressed"
    }],
  }
}, {
  "documents": {
    "icon": "<FileCopyIcon />",
    "formats": [{
      "pdf": "application/pdf"
    }, {
      "docx": "application/msword"
    }, {
      "doc": "application/vnd.openxmlformats-officedocument.wordprocessingml.document"
    }],
  }
}];

let accept = ["application/pdf", "image/jpeg"];

const acceptedFiles = supportedFiles.reduce((acc, item) => {
  const subItem = Object.values(item)[0];

  subItem.formats.forEach((format, index) => {
    if (accept.indexOf(Object.values(format)[0]) > -1) {
      acc.push(Object.keys(subItem.formats[index])[0]);
    }
  });

  return acc;
}, []).join(', ');


//test
console.info(acceptedFiles);

спасибо ты единственный кто понял

— 10.12.2020 17:55

10.12.2020 16:14