How to View Your Scraped Data in the UI

Quick Start

You have 79 tire suppliers scraped from San Francisco! Here's how to view them:

Option 1: View Raw JSON Data

Open the file directly in VS Code:

c:\Projects\robo-hub\scraper\output\San_Francisco_1764283840697.json

Option 2: Integrate into the React App

I've created a ScrapedDataViewer component for you. To use it:

Step 1: Copy the JSON data to the public folder

# From the robo-hub directory
mkdir -p public/data
cp scraper/output/San_Francisco_1764283840697.json public/data/scraped-suppliers.json

Step 2: Add the viewer to App.tsx

Add this import at the top of App.tsx:

import ScrapedDataViewer from './components/ScrapedDataViewer';

Add a state variable:

const [showScrapedData, setShowScrapedData] = useState(false);

Add a button in the header or somewhere visible:

<button onClick={() => setShowScrapedData(true)}>
  View Scraped Data
</button>

Add the modal at the bottom of the return statement:

{showScrapedData && <ScrapedDataViewer onClose={() => setShowScrapedData(false)} />}

Step 3: Load the data in ScrapedDataViewer

Update the useEffect in ScrapedDataViewer.tsx:

React.useEffect(() => {
  fetch('/data/scraped-suppliers.json')
    .then(res => res.json())
    .then(data => setSuppliers(data.suppliers));
}, []);

Option 3: Quick Demo Script

Create a simple HTML file to view the data:

<!DOCTYPE html>
<html>
<head>
  <title>Scraped Suppliers</title>
  <style>
    body { font-family: monospace; padding: 20px; background: #0a0a0a; color: #fff; }
    .supplier { border: 1px solid #333; padding: 15px; margin: 10px 0; background: #1a1a1a; }
    .rating { color: #22c55e; font-weight: bold; }
  </style>
</head>
<body>
  <h1>San Francisco Tire Suppliers (79)</h1>
  <div id="suppliers"></div>
  <script>
    fetch('../scraper/output/San_Francisco_1764283840697.json')
      .then(r => r.json())
      .then(data => {
        const container = document.getElementById('suppliers');
        data.suppliers.forEach(s => {
          container.innerHTML += `
            <div class="supplier">
              <h3>${s.business_name}</h3>
              <p>Rating: <span class="rating">${s.google_rating} ★</span> (${s.google_review_count} reviews)</p>
              <p>${s.address}</p>
              <p>Phone: ${s.phone || 'N/A'}</p>
              ${s.website ? `<p><a href="${s.website}" target="_blank">Website</a></p>` : ''}
            </div>
          `;
        });
      });
  </script>
</body>
</html>

Save this as view-suppliers.html in the root directory and open it in a browser.

Data Summary

Total Suppliers: 79
Category: Tires/Tyres
City: San Francisco
Average Rating: 4.9/5.0
With Websites: ~20 (25%)
Ready for Outreach: ~5 (6%)

What's in the Data

Each supplier includes:

Business name and address
Phone, email, website (when available)
Google rating and review count
Operating hours
Services offered
Capabilities (mobile service, fleet discounts, etc.)
Confidence score
Ready for outreach flag

PreviousDomain-Based Company Identity Architecture NextIdentity & Routing Strategy - The BIG Question

Last updated 8 days ago

Was this helpful?

hashtagQuick Start

hashtagOption 1: View Raw JSON Data

hashtagOption 2: Integrate into the React App

hashtagStep 1: Copy the JSON data to the public folder

hashtagStep 2: Add the viewer to App.tsx

hashtagStep 3: Load the data in ScrapedDataViewer

hashtagOption 3: Quick Demo Script

hashtagData Summary

hashtagWhat's in the Data