Javascript манипулирует/преобразует JSON
В настоящее время у меня есть компонент реакции, который принимает данные, которые выглядят следующим образом. Это для, как вы, наверное, догадались. Данные.
const data = {
rows: [
{row: [
{cell:'abc2'},
{cell:'abc2'},
{cell:'abc2'},
{cell:'abc2'},
]},
{row: [
{cell:'abc'},
{cell:'abc'},
{cell:'abc'},
{cell:'abc'},
]},
]
}
Сейчас. Я хочу каким-то образом создать функцию, которая может преобразовывать данные в любой форме в этот шаблон. Например. Учитывая следующее:
{
"id":"35078",
"employee_name":"hspl200",
"employee_salary":"0",
"employee_age":"0",
"profile_image":""
}
Я хотел бы преобразовать это в объект, основанный на ячейке, который станет:
{row: [
{cell:"35078"},
{cell:"hspl200"},
{cell:"0"},
{cell:"0"},
{cell:""}
]},
и так далее. Я мог бы писать что-то индивидуальное каждый раз, когда мне нужны данные для таблицы данных в этом формате, но в конечном итоге, вероятно, существует лучшее решение для формирования/преобразования объекта json из одного шаблона в другой.
Какие библиотеки/методы и т. д. я должен исследовать, чтобы добиться этого более многоразовым способом?
У меня есть мнение: не используйте для этих задач библиотеки или метафункции, такие как map(). Напишите короткую чистую функцию, использующую Object.values(), и все готово.
У меня противоположное мнение. ;-) Не используйте библиотеки, но определенно делать использует для этого map. Гораздо более явно указано, что он должен возвращать.
Что, вероятно, не было очевидно из моего вопроса, так это потенциально ненадежный формат структуры входных данных и попытка удовлетворить это. Я предполагаю, что записи isArray и Object и т. д. могли бы сделать это, просто подумали, что это должно быть уже решенной проблемой.
@Squiggs: я не уверен, какой диапазон входных структур вы хотели бы поддерживать. Действительно общий код потребует серьезной настройки для правильного использования. Если у вас есть список подобных объектов, все они имеют одинаковую структуру, легко написать универсальное преобразование. Но если свойства могут быть в другом порядке или если некоторые из них могут вообще отсутствовать, это становится сложнее.
@ScottSauyet - банкомат, я могу управлять серверной частью структуры JSON. Но я пытаюсь учесть ситуацию с использованием любого API, когда структуру нельзя контролировать, просто передавая ключи, которые нужно искать в json. Сейчас мы попробуем несколько разных форматов и посмотрим, что получится.
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 2
Поскольку общее решение для такой практической ситуации по-прежнему потребует большой конфигурации для удовлетворения конкретных требований.
Вы можете следовать такому подходу при работе с такими данными:
var data=[{
"id":"35078",
"employee_name":"hspl200",
"employee_salary":"0",
"employee_age":"0",
"profile_image":""
},{
"id":"35078",
"employee_name":"hspl200",
"employee_salary":"0",
"employee_age":"0",
"profile_image":""
}]
const newData=data.map((item)=>{
return {
row:Object.values(item).map((val)=>{
return {'cell':val}
})
}
})
console.info(newData)
Обратите внимание, что операторы return и тела блоков для стрелочных функций здесь больше отвлекают, чем помогают. По сравнению с функцией в первом фрагменте моего ответа это кажется излишне многословным. Конечно, de gustibus non est disputandum.
Вот тривиальный способ превратить объект в строку:
const makeRow = (value) => ({
row: Object.values(value).map(val => ({cell: val}))
})
const value = {"id":"35078","employee_name":"hspl200","employee_salary":"0","employee_age":"0","profile_image":""}
console.info(makeRow(value))Но если вы на самом деле не знаете свою структуру, вы можете написать что-то вроде этого, чтобы превратить коллекцию похожих объектов в (небольшой вариант) этот стиль данных:
const vals = [
{"id":"35078","employee_name":"hspl200","employee_salary":"0","employee_age":"35","profile_image":"pic1.jsp"},
{"id":"35079","employee_name":"hr4f302","employee_salary":"1","foobar":"baz","profile_image":"pic2.jpg"},
]
const makeTable = (values) => {
// get the superset of all objects' property names.
const headers = [...values.reduce(
(s, v) => Object.keys(v).reduce((s, k) => s.add(k), s),
new Set()
)]
return {
data: {
headers: headers.map(h => ({cell: h})),
rows: values.map(
value => ({
row: headers.map(h => ({cell: value[h] || ''}))
})
)
}
}
}
console.info(makeTable(vals))Обратите внимание, что хотя ключи объектов сильно перекрываются, они не идентичны. Это использует пустую строку для сообщения нулевых значений, хотя вы можете просто удалить || '', чтобы остановить это.
Предлагаемый вами вывод, похоже, имеет дополнительный ненужный уровень вложенности. Возможно, это требование для вашего формата данных, но если нет, вы можете удалить вложенное свойство row, заменив соответствующие строки на
value => (
headers.map(h => ({cell: value[h] || ''}))
)
(Также обратите внимание, что я понятия не имею, есть ли отдельный узел для заголовков, как я показал здесь. Но если нет, вы можете просто объединить этот результат и строки в один массив.)
Фантастический. Это дает мне отличное место для начала построения решения. Вы правы в своем предположении заголовков о том, что для этого также требуется некоторое построение. Я также могу безопасно удалить дополнительный слой вложенности.
На самом деле для этого нужно совсем немного. Хотя некоторые библиотеки могут помочь, просто начав с
Object.entries, вы должны пройти правильный путь к своей цели.