Develop Reference

How to use Apify web scrapper data in a React.js interface?

I'm using Apify web scraper to scrape h1,h2 and a span from a website. I have read all of their docs but I can't seem to find an answer for this.
async function pageFunction(context) {
const $ = context.jQuery;
const h1 = $('main h1').first().text();
const first_h2 = $('h2').first().text();
const random_text_from_the_page = $('main span').text();
// Print some information to actor log
context.log.info(`URL: ${context.request.url}, What is going on?: ${h1}`);
// Manually add a new page to the queue for scraping.
// await context.enqueueRequest({ url: 'http://www.example.com' });
// Return an object with the data extracted from the page.
// It will be stored to the resulting dataset.
return {
url: context.request.url,
h1,
first_h2,
random_text_from_the_page
};
}
How can I use that json data I get back and display it in a simple React UI for people to see?
Is it even possible? If not in React maybe just a simple vanilla JS UI?
Thank you.

How to convert a JS react page into an HTML page

So I'm working on a CMS project that allows users to create their own websites just like wordpress or other CMS platforms...
The users can implement different modals into their websites (text modal, image modal, search modal and other stuff), and then we create an object with the created page infos.
The Object contains all the page infos like the example bellow:
{
pageName: "Home page",
pageLink: "home",
pageSlug: "home-page",
pageMetaDescription: "home meta description",
pageMetaTitle : "home meta title",
pageModals : [
modal1: {
//modal infos here.
}
modal2: {
//modal infos here.
}
]
}
What I'm doing now is stocking these Objects on a database and when the user requests a page, I fetch the object and then generate a react JS file. But this approach isn't the best for performance or SEO.
So I would like to actually generate an HTML file from these Objects and store them in the database and when the user requests a page, it just loads the generated HTML file instead of fetching the Object and populating a react JS page.
If you have an Idea or approach to do this, I would like your help.

Yes you can use Next.js to handle your case
Next allow you to fetch some external data and render html based on api result
Here an example from documentation adapted for your cases
// pagesInfos will be populated at build time by getStaticProps()
function Blog({ pagesInfos }) {
const { pageSlug, pageMetaDescription , pageMetaTitle ...} = pagesInfos
return (
<div>
<h1>{postMetaTitle}</h1>
<p>{pageMetaDescription}</p>
</div>
)
}
// This function gets called at build time on server-side.
// It won't be called on client-side, so you can even do
// direct database queries.
export async function getStaticProps() {
// Call an external API endpoint to get posts.
// You can use any data fetching library
const res = await fetch('https://.../getPages')
const pagesInfos = await res.json()
// By returning { props: { pagesInfos } }, the Blog component
// will receive `pagesInfos` as a prop at build time
return {
props: {
pagesInfos,
},
}
}
export default Blog
Here is full docs : https://nextjs.org/docs/basic-features/data-fetching/get-static-props

Retrieve article object including its image using the Shopify JavaScript Buy SDK custom query

I'm using the shopify-buy SDK to try and fetch the articles off of my Shopify store just using JavaScript on the frontend, following the "Expanding the SDK" directions here: https://shopify.github.io/js-buy-sdk/#expanding-the-sdk.
Using the code below, I am able to retrieve my articles and some of the fields that I need.
// Build a custom query using the unoptimized version of the SDK
const articlesQuery = client.graphQLClient.query((root) => {
root.addConnection('articles', {args: {first: 10}}, (article) => {
article.add('title')
article.add('handle')
article.add('url')
article.add('contentHtml')
})
})
// Call the send method with the custom query
client.graphQLClient.send(articlesQuery).then(({model, data}) => {
console.log('articles data')
console.log(data)
})
However, I really need to pull the featured image for each article as well, and unfortunately, when I add the line article.add('image') in my articlesQuery, the resulting articles data logs null. I tried building a custom productsQuery, and that has a similiar problem - I can retrieve some of the product fields, but when I try add the line product.add('images'), I just get null back from the storefront API.
Does anyone have experience building custom/expanded queries and successfully retrieving images?

Try following:
// Fetch all products in your shop
client.graphQLClient.fetchAll().then((acticles) => {
console.log(acticles);
});
And then check in console what sort of available property names your articles have. If SDK allows you get any image data, there should be for sure anything like imageSrc || imageUrl || img......

Thanks to Rebecca Friedman on the js-buy-sdk repo's github issues section for providing this working solution:
const articlesQuery = client.graphQLClient.query((root) => {
root.addConnection('articles', {args: {first: 10}}, (article) => {
article.add('title')
article.add('handle')
article.add('url')
article.add('contentHtml')
article.addField('image', {}, (image) => {
image.add('id')
image.add('originalSrc')
})
})
})
// Call the send method with the custom query
client.graphQLClient.send(articlesQuery).then(({model, data}) => {
console.log('articles data')
console.log(data) // works!
})
Because the image field is its own object, you have to add a callback function to specify the fields you need.

Showing single data field via Google Analytics API

I'm having trouble displaying only a single data field via the Google Analytics API.
For example, how would I display the number of users yesterday? Or the number of users in the past week?
I'm assuming "gapi.analytics.report.Data" is the right constructor. I've tried following the "Data" code in Google's Built-in Components Reference but nothing displays on the front-end.
For the "DataChart" code, there's a "container" option that references the HTML element in the DOM that will correctly display the chart.
This "container" option is missing in "Data" - so how do I display a single data field?
EDIT: Here's the code I'm working with.
You can see a pastebin of my code here: https://pastebin.com/M6U0Bd8B
There's also a live staging version of the site here: http://madebychris.ca/dashboard2.html
The first four section ids are all displaying properly but nothing's showing up for the final <p class ="report">

If you are trying to access the raw data numbers, you can just access the response object:
// Set up the request
var report = new gapi.analytics.report.Data({
query: {
ids: 'ga:XXXX',
metrics: 'ga:sessions',
dimensions: 'ga:city'
}
});
// Define what to do with the response data.
report.on('success', function(response) {
console.log(response);
});
// Run the report
report.execute();
For example, the total's for the metrics is response.totalsForAllResults and the rows for each dimension are held in response.rows
You need to select what you want to do with the variables on the report.on("success", function(response){ function. For example:
report.on('success', function(response) {
$("body > main > div > section:nth-child(4) > h2")[0].innerText =
response.totalsForAllResults["ga:sessions"]
});
report.execute();
Note: You should be able to test on the embedded API demo. Copying and pasting the initial code with the console.log should help show what is going on.

Custom Grid Query Syntax for Rally Portfolio Items for specific Parent Project via WebService API

We're starting to experiment with Rally's WebService API for Portfolio Items. We don't have any issues when creating Custom GRID apps in Rally, but are running into an issue when trying to create Custom HTML apps. We're trying to query a list of portfolio items (lowest level in portfolio item hierarchy) for a specific parent portfolio item.
We're using the following query, which works for Custom GRID apps, but not for Custom HTML apps:
'(Parent.FormattedID = "P123")',
We're using the following API version:
<script type="text/javascript" src="/apps/1.32/sdk.js?apiVersion=1.38"></script>
Here's the relavant code we're using within the HTML Custom Grid:
function onLoad() {
rallyDataSource = new rally.sdk.data.RallyDataSource(
'123456789',
'123456790',
'__PROJECT_SCOPING_UP__',
'__PROJECT_SCOPING_DOWN__');
var queryConfig = [];
queryConfig.push({
type: 'portfolioitem',
key : 'pisQueryKey',
query: '(Parent.FormattedID = "P123")',
fetch: 'FormattedID,Name,PortfolioItemType,PlannedStartDate,PlannedEndDate,LeafStoryCount,LeafStoryP>lanEstimateTotal,PercentDoneByStoryCount,PercentDoneByStoryPlanEstimate'
});
rallyDataSource.findAll(queryConfig, drawTable);
}
We only see "There is nothing to display." under the table headers. Thanks in advance for any suggestions and/or alternative solutions!

This feels like a bug. SDK 1.x uses a different web service endpoint (adhoc.js) than the custom grid app and SDK 2.x. I was able to get it to work correctly by using just the parent's ref in the query instead of its FormattedID:
query: '(Parent = /portfolioitem/initiative/12345)'
In the meantime I will look into it and see what I can find out.