Используя API Edmunds (edmunds.mashery.io), я пытаюсь проанализировать объект автомобиля.
Как вы можете видеть JSON ответ хорошо отформатирован в следующем вложенном дереве: Make (ID, имя, модели) -> Модели (ID, имя, nicename, стили) -> СтилиИтерация через вложенные объекты JSON
С этим в виду, рассмотрим следующий ответ API:
{
"name": "BMW",
"model": [
{
"id": "BMW_2_Series",
"name": "2 Series",
"nicename": "2-series",
"styles": [
{
"id": 200744428,
"name": "228i 2dr Coupe (2.0L 4cyl Turbo 6M)",
"drivenwheels": "rear wheel drive",
"numofdoors": 2,
"manufacturercode": "162A",
"engine": 200744477,
"transmission": 200744479,
"trim": "228i",
"pricebasemsrp": "32850.0",
"pricebaseinvoice": "30720.0",
"pricedeliverycharges": "995.0",
"submodelbody": "Coupe",
"submodelname": "2 Series Coupe",
"submodelnicename": "coupe",
"mpghighway": "34",
"mpgcity": "22",
"categoriesmarket": "Luxury,Performance",
"epaclass": "Subcompact Cars",
"vehiclesize": "Compact",
"crossover": "NA",
"primarybodytype": "Car"
},
{
"id": 200744429,
"name": "228i SULEV 2dr Coupe (2.0L 4cyl Turbo 8A)",
"drivenwheels": "rear wheel drive",
"numofdoors": 2,
"manufacturercode": "162B",
"engine": 200744475,
"transmission": 200744478,
"trim": "228i SULEV",
"pricebasemsrp": "32850.0",
"pricebaseinvoice": "30720.0",
"pricedeliverycharges": "995.0",
"submodelbody": "Coupe",
"submodelname": "2 Series Coupe",
"submodelnicename": "coupe",
"mpghighway": "35",
"mpgcity": "23",
"categoriesmarket": "Luxury,Performance",
"epaclass": "Subcompact Cars",
"vehiclesize": "Compact",
"crossover": "NA",
"primarybodytype": "Car"
}]},
{
"id": "BMW_3_Series",
"name": "3 Series",
"nicename": "3-series",
"styles": [
{
"id": 200729833,
"name": "320i 4dr Sedan (2.0L 4cyl Turbo 8A)",
"drivenwheels": "rear wheel drive",
"numofdoors": 4,
"manufacturercode": "16TI",
"engine": 200741606,
"transmission": 200741614,
"trim": "320i",
"pricebasemsrp": "33150.0",
"pricebaseinvoice": "31000.0",
"pricedeliverycharges": "995.0",
"submodelbody": "Sedan",
"submodelname": "3 Series Sedan",
"submodelnicename": "sedan",
"mpghighway": "36",
"mpgcity": "24",
"categoriesmarket": "Luxury",
"epaclass": "Compact Cars",
"vehiclesize": "Midsize",
"crossover": "NA",
"primarybodytype": "Car"
}
}
}
Использование Ajax Jquery, я могу загрузить ответ JSON. Я пытаюсь создать динамические кнопки на основе идентификатора модели (каждая модель представляет собой контейнер в коробке, содержащий информацию о модели, заполненной данным ответом.
В моей текущей проблеме стоит, что когда я пытаюсь выполнить итерацию .each, я получаю:
ключ: модель
значение:. [Объект] [Object] ... [Объект]
То, что я пытаюсь выполнить доступ к содержанию объекта в динамике и заполнить, чтобы заполнить его
В дополнение к сфере применения этого вопроса у меня есть более общий вопрос, основанный на BIG Picture:
Использование API Эдмунда я планирую сделать веб-сайт выбора автомобиля с помощью кнопок, где:
Состояние 1: Заставляет заселена, когда выбран макияж, перейти в состояние 2.
Состояние 2: Кнопки модели заполняются из JSON API, перейти в состояние 3.
Вот моя текущая функция JQuery:
$.getJSON('http://127.0.0.1:8000/makes/200000081.json', function(models) {
console.log(models.model[0].name)
});
Вот мой результат:
2 Серии
Если изменить модель [0] для моделирования [3] изменение результата (как это должно.) Как я могу получить модель [х] .name в массиве я могу манипулировать с HTML?
'является JQuery жизнеспособным вариантом для создания динамического SPA' - Jquery не архитектура. Это инструмент для работы с DOM. Да, вы можете абсолютно создать 'SPA' с jQuery в своем инструменте, так же, как вы можете построить их с помощью ванильного JS. Если вы полагаетесь на 'jQuery' для обеспечения архитектуры вашего приложения (что означает, что вы полагаетесь на состояние своего приложения, которое должно сохраняться, в основном в DOM), тогда вы находитесь в мире обид. – Adam
@Adam Спасибо, что ответили на большую картинку. Итак, чтобы следить за тем, какова была бы ваша рекомендация для такого подхода, чтобы выбрать мир удовольствия? – Moshe
Опыт. Или, если не удается, возможно, используя фреймворк, который по умолчанию использует хорошую архитектуру, например, угловую, или React/Redux (одного только Реактива недостаточно).Использование таких фреймворков делает кривую обучения более крутой, но она имеет дополнительное преимущество в обучении вам хороших архитектурных принципов, даже если вы даже не понимаете, что вы их изучаете .... Это действительно зависит от уровня сложности вашего SPA. Если это довольно легко (без каких-либо планов по переходу на что-то более тяжелое), тогда ваши потребности в хорошей архитектуре уменьшаются, а рамки просто добавляют временную стоимость. – Adam