@Alisa94

Как передать объект из JS файла на html страницу?

Добрый день. У меня возникла несколько сложная проблема, попытаюсь максимально ясно описать.
Итак, я с сервера получаю два объекта для своих двух моделей. Эти объекты содержат в себе поля категории, фамилии, идентификатор элементов модели и т.п. Путём фильтрации я получаю 4 массива. В первом и втором массиве хранятся уникальные идентификаторы, а в третьем и четвёртом повторяющиеся идентификаторы. В первом массиве содержится уникальный идентификатор для первой модели. во втором - уникальный для второго массива, а в третьем и четвёртом общие элементы для них соответственно.
Для наглядности сказанного приведу следующий пример.
const dataFirstModel = [{"revitid": "1"},{"revitid": "2"},{"revitid": "3"},{"revitid": "4"}];
const dataSecondModel = [{"revitid": "1"},{"revitid": "2"},{"revitid": "5"},{"revitid": "6"}];

Как видно из кода у них первые две revitid одинаковые, а последние различные. В итоге я путём фильтрации получил следующие массивы:
[ //first array(difference)
  { 
    revitid: 3
    building: ""
    level: ""
    room: ""
    viewid: 3302
    category: "Walls"
    family: "Basic Wall"
    symbol: "Wall-Ext_102"
  },{
    revitid: 4
    building: ""
    level: ""
    room: ""
    viewid: 3303
    category: "Walls"
    family: "Basic Wall"
    symbol: "Wall-Ext_102"
  }
];

[ //second array(difference)
  { 
    revitid: 5
    building: ""
    level: ""
    room: ""
    viewid: 3304
    category: "Walls"
    family: "Basic Wall"
    symbol: "Wall-Ext_102"
  },{
    revitid: 6
    building: ""
    level: ""
    room: ""
    viewid: 3305
    category: "Walls"
    family: "Basic Wall"
    symbol: "Wall-Ext_102"
  }
];
[ //first array(similar)
  { 
    revitid: 1
    building: ""
    level: ""
    room: ""
    viewid: 3300
    category: "Walls"
    family: "Basic Wall"
    symbol: "Wall-Ext_102"
  },{
    revitid: 2
    building: ""
    level: ""
    room: ""
    viewid: 3301
    category: "Walls"
    family: "Basic Wall"
    symbol: "Wall-Ext_102"
  }
];

[ //second array(similar)
  { 
    revitid: 1
    building: ""
    level: ""
    room: ""
    viewid: 3300
    category: "Walls"
    family: "Basic Wall"
    symbol: "Wall-Ext_102"
  },{
    revitid: 2
    building: ""
    level: ""
    room: ""
    viewid: 3301
    category: "Walls"
    family: "Basic Wall"
    symbol: "Wall-Ext_102"
  }
];


Теперь мне нужно передать эти массивы на html страницу и я не могу справиться с этим заданием.
Передать нужно следующим образом.
1) Кнопка для категорий, которая открывается при нажатии. Категорий может быть несколько, для примера может быть категория стен и крыш.
2) В открытой категории должна быть кнопка для свойства family, которая так же открывается.
3) В открытом family должна быть кнопка для свойства symbol.
4) После нажатия на кнопку со свойством symbol должна открыться список кнопок, по следующим признакам:
а. В самом верху должна быть кнопка из первого массива, т.е. различия первой модели. Эти кнопки должны иметь фиолетовый цвет фона и метод "onclick=`firstModel(${viewid})`".
b. Под кнопками из первого массива должны располагаться кнопки второго массива, но они должны иметь зелёный фон и метод "onclick=`secondModel(${viewid})`".
с. Далее должны следовать кнопки из третьего массива, имеющие оранжевый цвет фона и метод "onclick=`firstModel(${viewid})`".
d. В конце будут кнопки из четвёртого массива, тоже имеющие оранжевый фон, но с методом "onclick=`secondModel(${viewid})`".

В итоге должен быть такой список:
> category
> > family
> > > symbol
> > > > button
> > > > button
> > > > button
> > > > button

> other category
> > family
> > > symbol
> > > > button
> > > > button

Я буду очень благодарен за помощь. Спасибо за уделенное время, если будут вопросы пожалуйста обращайтесь.
  • Вопрос задан
  • 360 просмотров
Решения вопроса 1
joeberetta
@joeberetta Куратор тега JavaScript
Читай: https://epdf.pub/google-for-dummies.html
- Начните с создания нужного элемента: document.createElement('elemTag')
- Задайте ей классы или атрибуты: elem.classList.add('someClass') или document.createAttribute("someAttr")
- Вставьте его в саму страницу parentElem.appendChild(elem)

Если что, тут подробнее описано
Ответ написан
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Похожие вопросы