Как передать данные Bing Web Search API из Django для отображения в React

У меня получилось вывести данные из результатов поиска в папку Django под названием api.py с помощью Python. Но как мне теперь перенести эти данные в react, чтобы отобразить их? Может ли кто-нибудь помочь мне с подробным описанием того, как это сделать. Заранее большое спасибо!

У меня также есть ключ API Bing, хранящийся в файле .env, который находится на том же уровне файлов, что и файл api.py.

API веб-поиска Bing: https://learn.microsoft.com/en-us/bing/search-apis/bing-web-search/reference/endpoints

code: в файле api.py

`from pprint import pprint
import requests
from decouple import config

subscription_key = config('subscription_key', default='')

search_url = "https://api.bing.microsoft.com/v7.0/search"
search_term = 'iphone 13'

headers = {"Ocp-Apim-Subscription-Key": subscription_key}
params = {"q": search_term, "textDecorations": True, "textFormat": "HTML"}
response = requests.get(search_url, headers=headers, params=params)
response.raise_for_status()
search_results = response.json()

pages = search_results\['webPages'\]
results = pages\['value'\]
pprint(results\[0\])`

Вот какие данные я получаю в терминале:

Я пробовал искать в stackoverflow и во всем интернете, не нашел никого, кто бы действительно использовал этот API...

Краткий ответ

Почему бы вам не создать GET api в приложении Django и не разместить всю эту логику внутри представления DRF. Например, отобразите эту конечную точку на вашем представлении

/my-view

. И, наконец, вызовите этот api из вашего react-приложения

Подробный ответ:

ШАГ 1: Создайте представление в файле views.py:

from django.shortcuts import render from django.http import HttpResponse из pprint import pprint импортировать запросы from decouple import config

def my_view(request):
    subscription_key = config('subscription_key', default='')

    search_url = "https://api.bing.microsoft.com/v7.0/search"
    search_term = 'iphone 13'

    headers = {"Ocp-Apim-Subscription-Key": subscription_key}
    params = {"q": search_term, "textDecorations": True, 
    "textFormat": "HTML"}
    response = requests.get(search_url,headers=headers,params=params)
    response.raise_for_status()
    search_results = response.json()

    pages = search_results\['webPages'\]
    results = pages\['value'\]
    pprint(results\[0\])`
    return results

ШАГ 2: Вам нужно сопоставить функцию представления с URL. Откройте файл urls.py вашего приложения и добавьте шаблон URL для вашего представления. Например:

from django.urls import path
from . import views

urlpatterns = [
    path('my-view/', views.my_view, name='my-view'),
]

ШАГ 3:

Создайте компонент в React :

import React, { useState, useEffect } from 'react';
import axios from 'axios';

const MyComponent = () => {
    const [data, setData] = useState(null);

    useEffect(() => {
        const fetchData = async () => {
            try {
                const response = await axios.get('http://your-django-api-url/my-view/');
                setData(response.data);
            } catch (error) {
                console.error('Error fetching data:', error);
            }
        };

        fetchData();
    }, []);

    return (
        <div>
            <h1>My Component</h1>
            {data ? (
                <ul>
                    {data.map((item) => (
                        <li key={item.id}>{item.name}</li>
                    ))}
                </ul>
            ) : (
                <p>Loading...</p>
            )}
        </div>
    );
};

export default MyComponent;

Шаг 4:

Рендеринг этого компонента :

import React from 'react';
import MyComponent from './MyComponent';

const App = () => {
    return (
        <div>
            <h1>My React App</h1>
            <MyComponent />
        </div>
    );
};

export default App;

```This is what I have, I am getting an AttributError-list object has no attribute get. What am I doing wrong?```

[console][1] https://i.stack.imgur.com/5yT6P.png
[views/react][1]: https://i.stack.imgur.com/aJiBM.png
[paths][1]: https://i.stack.imgur.com/TBBZx.png```
Вернуться на верх