Массив Json проходит через Larvel Vue, но не работает должным образом

Я использую бэкэнд laravel для vuejs после передачи значений с помощью json return response() -> json(array('product' =>$product,'product_materials' =>$product_materials));

за /product_details/1 я получаю product:{}, product_materials: [{}], что мне и нужно но /product_details/2 и т. д. он отправляет значения product: {}, product_materials: {"number": {}} в чем здесь проблема? из-за этого я не могу делать динамические вычисления.

/product_details/1

{
    "product": {
        "id": 1,
        "name": "Wooden Table",
        "description": "Dining",
        "quantity": 2,
        "material_items": 7,
        "material_cost": 87.6,
        "waste_percentage": 5,
        "waste_amount": 4.38,
        "labour_percentage": 15,
        "labour_amount": 13.796999999999999,
        "equipment_cost": "10.000",
        "other_percentage": 8,
        "other_amount": 9.26216,
        "margin_percentage": 10,
        "margin_amount": 12.503915999999998,
        "sub_total": 137.54307599999999,
        "amount": 275.08615199999997,
        "created_at": "2022-04-04T20:02:16.000000Z",
        "updated_at": "2022-04-09T13:04:44.000000Z",
        "created_by": 1,
        "updated_by": 1,
        "deleted_by": null,
        "deleted": 0
    },
    "product_materials": [
        {
            "id": 1,
            "product_id": 1,
            "description": "MDF Sheet",
            "quantity": 10,
            "rate": "5.000",
            "amount": "50.000",
            "delete": 0,
            "created_at": "2022-04-04T20:03:13.000000Z",
            "updated_at": "2022-04-04T20:03:13.000000Z",
            "created_by": 1,
            "updated_by": null,
            "deleted_by": null
        },
        {
            "id": 2,
            "product_id": 1,
            "description": "Filer",
            "quantity": 2,
            "rate": "10.000",
            "amount": "20.000",
            "delete": 0,
            "created_at": "2022-04-04T20:03:53.000000Z",
            "updated_at": "2022-04-04T20:03:53.000000Z",
            "created_by": 1,
            "updated_by": null,
            "deleted_by": null
        },
        {
            "id": 3,
            "product_id": 1,
            "description": "Primer",
            "quantity": 1,
            "rate": "4.000",
            "amount": "4.000",
            "delete": 0,
            "created_at": "2022-04-04T20:04:15.000000Z",
            "updated_at": "2022-04-04T20:04:15.000000Z",
            "created_by": 1,
            "updated_by": null,
            "deleted_by": null
        },
    ]
}

и для другого примера: /product_details/2

    "product": {
        "id": 2,
        "name": "Table",
        "description": "1.5m",
        "quantity": 1,
        "material_items": 1,
        "material_cost": 50,
        "waste_percentage": 2,
        "waste_amount": 1,
        "labour_percentage": 2,
        "labour_amount": 1.02,
        "equipment_cost": "20.000",
        "other_percentage": 2,
        "other_amount": 1.4404,
        "margin_percentage": 2,
        "margin_amount": 1.4692079999999998,
        "sub_total": 74.929608,
        "amount": 74.929608,
        "created_at": "2022-04-07T13:15:20.000000Z",
        "updated_at": "2022-04-09T13:21:54.000000Z",
        "created_by": 1,
        "updated_by": 1,
        "deleted_by": null,
        "deleted": 0
    },
    "product_materials": {
        "11": {
            "id": 12,
            "product_id": 2,
            "description": "Wood",
            "quantity": 10,
            "rate": "5.000",
            "amount": "50.000",
            "delete": 0,
            "created_at": "2022-04-09T10:27:21.000000Z",
            "updated_at": "2022-04-09T10:27:21.000000Z",
            "created_by": 1,
            "updated_by": null,
            "deleted_by": null
        }
    }
}
$product_materials = product_materials::all()->where('product_id', $product->id);

получение материалов продукта на основе идентификатора продукта.

$product = product::find($id);

и в Vue.js

data() {     return { product: {}, product_materials: [{}] };   },

потому что вы манипулировали коллекцией и сохранили в ней индексы. это поможет нам помочь вам, если вы опубликуете источник тех коллекций, которые вы возвращаете. как дела $product_materials

N69S 09.04.2022 15:35

@ N69S $product_materials = product_materials::all()->where('product_id', $product->id); получение материалов продукта на основе идентификатора продукта. $product = product::find($id); и во Vue.js data() { return { product: {}, product_materials: [{}] }; },

Dynamite 09.04.2022 15:40

Отвечает ли это на ваш вопрос? Laravel API - аксиомы Vue js для отображения из Json

Rohìt Jíndal 09.04.2022 16:11

@RohìtJíndal Частично это произошло, как я уже упоминал, только /product_details/1 дает правильный результат. /product_details/2 и т. д. нет.. поэтому я задал этот вопрос здесь

Dynamite 09.04.2022 16:32

@Faizan /product_details/1 дает вам правильный формат по «совпадению», поскольку первые элементы в коллекции product_materials::all() действительно принадлежат product_id = 1 (в результате индексы последовательны). добавьте еще один product_materials, принадлежащий product_id = 1 в вашу таблицу (более высокий идентификатор), и он вернет индексы, такие как результаты с /product_details/2

N69S 09.04.2022 17:31
Формы c голосовым вводом в React с помощью Speechly
Формы c голосовым вводом в React с помощью Speechly
Пытались ли вы когда-нибудь заполнить веб-форму в области электронной коммерции, которая требует много кликов и выбора? Вас попросят заполнить дату,...
Стилизация и валидация html-формы без использования JavaScript (только HTML/CSS)
Стилизация и валидация html-формы без использования JavaScript (только HTML/CSS)
Будучи разработчиком веб-приложений, легко впасть в заблуждение, считая, что приложение без JavaScript не имеет права на жизнь. Нам становится удобно...
Flatpickr: простой модуль календаря для вашего приложения на React
Flatpickr: простой модуль календаря для вашего приложения на React
Если вы ищете пакет для быстрой интеграции календаря с выбором даты в ваше приложения, то библиотека Flatpickr отлично справится с этой задачей....
В чем разница между Promise и Observable?
В чем разница между Promise и Observable?
Разберитесь в этом вопросе, и вы значительно повысите уровень своей компетенции.
Что такое cURL в PHP? Встроенные функции и пример GET запроса
Что такое cURL в PHP? Встроенные функции и пример GET запроса
Клиент для URL-адресов, cURL, позволяет взаимодействовать с множеством различных серверов по множеству различных протоколов с синтаксисом URL.
Четыре эффективных способа центрирования блочных элементов в CSS
Четыре эффективных способа центрирования блочных элементов в CSS
У каждого из нас бывали случаи, когда нам нужно отцентрировать блочный элемент, но мы не знаем, как это сделать. Даже если мы реализуем какой-то...
0
5
32
3
Перейти к ответу Данный вопрос помечен как решенный

Ответы 3

это не связано с vuejs, попробуйте вернуть product_materials как массив объектов даже для одного объекта

это должно быть так

"product_materials": [
    {
        "id": 12,
        "product_id": 2,
        "description": "Wood",
        "quantity": 10,
        "rate": "5.000",
        "amount": "50.000",
        "delete": 0,
        "created_at": "2022-04-09T10:27:21.000000Z",
        "updated_at": "2022-04-09T10:27:21.000000Z",
        "created_by": 1,
        "updated_by": null,
        "deleted_by": null
    }
]

Я использовал $product_materials = product_materials::all()->where('product_id', $product->id); в контроллере. Laravel делает all() массивом, верно? Я даже использовал toArray(), я получаю тот же результат. Первый - это массив, а 2-й, 3-й, 4-й и т. д. - нет. Они отображаются как "product_materials": {"number"{}}

Dynamite 09.04.2022 17:25

можешь попробовать это product_materials::where('product_id', $product->id)->get();

Ahmed Hassan 09.04.2022 17:31
Ответ принят как подходящий

Вы фильтруете коллекцию с помощью where() после того, как получите все product_materials из базы данных.

Измените его на это, и это решит вашу проблему. он же применяет условие перед получением результатов из базы данных (тоже лучше производительность)

$product_materials = product_materials::where('product_id', $product->id)->get();

использовать :

$product_materials = product_materials::query()
    ->where('product_id', $product->id)
    ->get();

ИЛИ :

$product_materials = product_materials::query()
    ->where('product_id', $product->id)
    ->first()();

Другие вопросы по теме