Question 110394 in Json Question posted in
Our archive of expertly curated questions and answers provides insights and solutions to common problems related to this popular data interchange format. From parsing and manipulating JSON data to integrating it with various programming languages and web services, our archive has got you covered. Start exploring today and take your JSON skills to the next level

Json – SolidJS: "Unrecognized value"

I am able to receive the JSON value from the API path just fine.

Flask Code

app = Flask(__name__)
CORS(app)

@app.route("/cats-matches", methods=['POST'])
def cats_matches():
    person = {"name": "John"} #Does not work
    #person = [{"name": "John"}] #This works

    return person

if __name__ == "__main__":
    app.run(host="0.0.0.0",debug=True)

SolidJS

  • The "Go" button sets the web_orders signal to an object with the name data
  • That triggers the cats_matches resource to run fetchCatsMatches()
  • I call {cats_matches()} on the page just to dump the data
  • This shows correctly "[Object object]" if I return a List from the Flask route
  • Returning a Dict from Flask shows nothing on the page and has the console error: Unrecognized value. Skipped inserting {name: ‘John’}
import { createSignal, createResource } from "solid-js";

const fetchCatsMatches = async (web_orders) =>
  (await fetch('http://127.0.0.1:5000/cats-matches', {
    method: "POST",
    body: JSON.stringify(web_orders),
    headers:{
      "Content-type": "application/json; charset=UTF-8",
      "Accept": "application/json"
    }
  })).json();

const CatsCustomerMatches = () => {
  const [web_orders, setWebOrders] = createSignal([]);

  const [cats_matches, { mutate, refetch }] = createResource(web_orders, fetchCatsMatches);

  const getCatsMatches = () => {
    setWebOrders([{'po': 123}]);
  };

  return (
    <>
      <button onClick={() => getCatsMatches()} >Go</button>
      <p>{cats_matches()}</p>
    </>
  );
}

function App() {
  return (
    <div class="grid grid-cols-1">
      <CatsCustomerMatches />
    </div>
  );
}

export default App;
Tags:

2

Answers


  1. 0

    That is because you are using an object directly in your rendering logic and jsx can not render objects directly. So, rather than outputting the resource, try stringifying it, so that you can avoid rendering errors:

    <p>{JSON.stringify(cats_matches()}</p>

    Solid somehow is more permissive with using array values directly than using object values. Either way you have error, [Object object] does not mean you are printing the value. In the case of an array, the value somehow gets converted into a string when the DOM element getting created and you see [Object object].

    You can observe this easily:

    import { render } from 'solid-js/web';

const App = () => {
  const getValue = () => {
    return {"name": "John"};
  }
  
  return (
    <>
      <p>{getValue()}</p>
    </>
  );
}

render(App, document.body);

    You will get:

    Unrecognized value. Skipped inserting 
Object {name: "John"}

    Try wrapping the value in an array, you will see the error is gone and the paragraph content becomes [Object object].

    As a side note, you can wrap your application in an error boundary to get bettor error results:

    
const fallback = (err) => {
  console.log(err);
  return err.message;
}

<ErrorBoundary fallback={fallback}>
<App>{/* App content */}</App>
<ErrorBoundary
    Login or Signup to reply.
  2. 0

    I tested the code, I observed that you can set initial value

    const [cats_matches, { mutate, refetch }] = createResource(web_orders, fetchCatsMatches, { initialValue: { name: "" } });

    Now change your display code as below

    <>
   <button onClick={() => getCatsMatches()} >Go</button>
   <p>{cats_matches().name}</p>
</>

    Or you can also use Suspense from these Examples Example1, Example2, Example3

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search