Fetch tag value data to another website

Ignition
1

Hi all,

I am having trouble figuring out how to get the tag value from ignition(localhost:9088) and show it on another website(localhost:8000). I am currently using the trial version of Ignition and their sample quick start as it has some tag values that can be used. I'm getting error 404 as it can't seem to read the path. I can get the tag value on Postman but I can't get it on my localhost:8000. Am I missing anything or is there something wrong with my tag path? Would be great if I could get some help!

Script below:


import React, { useState, useEffect } from 'react';
import { Box, Button, Layer, Text } from 'grommet';

const TagValueLayer = () => {
  const [tagValue, setTagValue] = useState(undefined);
  const [error, setError] = useState(null);

  const tagPath = '[Sample_Tags]Sine/Sine1';
  const ignitionServer = 'http://localhost:9088';

  const fetchTagValue = async () => {
    try {
      const response = await fetch(
        `${ignitionServer}/main/system/tag/read?paths=${tagPath}`,
      );
      if (!response.ok) {
        throw new Error('Network response was not ok');
      }
      const data = await response.json();
      setTagValue(data.value);
    } catch (error) {
      setError('Error fetching tag value. Check your URL and server.');
    }
  };

  useEffect(() => {
    fetchTagValue();
  }, []);

  return (
    <Layer position="center" modal onClickOutside={() => {}}>
      <Box pad="medium" gap="small" width="medium">
        <Text>
          {error
            ? `Error: ${error}`
            : `Tag Value: ${tagValue !== undefined ? tagValue : 'Loading...'}`}
        </Text>
        <Button label="Close" onClick={() => {}} />
      </Box>
    </Layer>
  );
};

export default TagValueLayer;
2

You need to implement tag value retrieval as an API within Ignition, typically with the WebDev module.

What made you think /main/system/tag/read was an API?

1 Like