时间戳

首页 > 解决方案 > Nextjs 中的 JSON 解析

javascript - Nextjs 中的 JSON 解析

问题描述

我对 Javascript 有点陌生。这似乎是个愚蠢的问题。我试图在 Nextjs Main 函数中解析 JSON。当我尝试在 return 语句之前在 main 函数中解析 JSON 时，它显示错误SyntaxError: Unexpected token o in JSON at position 1

export default function Home() {
    const countries = JSON.parse({"data":{"countries":[{"name":"Canada"}]}})
    return (
        <pre>{JSON.stringify(countries)}</pre>
    )
}

更新

关于问题详情

较早的评论确实解决了之前提出的问题。谢谢@boop_the_snoot 和@Anvay。但是，这并不是我试图重现错误的问题。

我的 nextjs 路线[forecastCategory]/[xquote]/[forecastid].js带有以下代码：

import {pathsData} from "@/components/Data"


export default function ForecastID({ stocksString}) {
    //var myStocks = JSON.parse(stocksString)
    return (
      <>
      
      <pre>{stocksString}</pre>
      
    </>
  );
}


export const getStaticProps = async (ctx) => {
  // HERE JSON STRING DIRECT ENTRY.
  var stocksDataTemp = {
    "daily-forecast--1": {
      "DFP4362832": [
        "SJ78449",
        99,
        21,
        99,
        "View",
        [
          {
            "name": "STOCK111",
            "LTP": 164.35,
            "BUY": 170,
            "SELL": 177,
            "GAIN": 3.95
          }
        ]
      ],
      "DFP1329702": [
        "SJ59264",
        98,
        21,
        96,
        "View",
        [
          {
            "name": "STOCK112",
            "LTP": 475.1,
            "BUY": 484,
            "SELL": 497,
            "GAIN": 2.62
          }
        ]
      ]
    },
    "daily-forecast--2": {
      "DFP8899451": [
        "SJ49453",
        99,
        21,
        98,
        "View",
        [
          {
            "name": "STOCK113",
            "LTP": 1787.25,
            "BUY": 1894,
            "SELL": 1935,
            "GAIN": 2.12
          },
          {
            "name": "STOCK114",
            "LTP": 467.3,
            "BUY": 481,
            "SELL": 493,
            "GAIN": 2.43
          }
        ]
      ],
      "DFP9681539": [
        "SJ54067",
        97,
        25,
        91,
        "View",
        [
          {
            "name": "STOCK115",
            "LTP": 194.5,
            "BUY": 201,
            "SELL": 211,
            "GAIN": 4.74
          },
          {
            "name": "STOCK116",
            "LTP": 1461.15,
            "BUY": 1563,
            "SELL": 1612,
            "GAIN": 3.04
          }
        ]
      ]
    }
  }

  const xquote = ctx.params.xquote;
  console.log("xquote:",xquote)
  const quoteCount = xquote.split("-", 1)[0];
  console.log("quoteCount:",quoteCount)
  const forecastCategorySlug = ctx.params.forecastCategory;
  console.log("forecastCategorySlug:",forecastCategorySlug)
  const forecastid = ctx.params.forecastid; 
  console.log("forecastid:",forecastid)

  var stocksPageData = stocksDataTemp[forecastCategorySlug + "--" + quoteCount][forecastid];
  console.log("stocksString:",stocksString)
  var stocksPageDataString = JSON.stringify(stocksPageData);
  var stocksString = JSON.stringify(stocksPageData[5])
  console.log("stocksString:",stocksString)
  //var countriesString = JSON.stringify({"data":{"countries":[{"name":"Canada"}]}})

  return {
    props: {
      stocksString,
    },
  };
};

export const getStaticPaths = async (ctx) => {
...
}

路线上的上述代码/daily-forecast/1-quote/DFP4362832产生以下内容：

[{"name":"STOCK111","LTP":164.35,"BUY":170,"SELL":177,"GAIN":3.95}]

但是，当我取消注释var myStocks = JSON.parse(stocksString)它会产生较早的 JSON 解析错误时SyntaxError: Unexpected token o in JSON at position 1，我仍然无法找出 JSON 解析问题。

标签： javascriptnext.js

解决方案

我看到您正在使用JSON.parse()，这是正确的。但是，只JSON.parse接受一个字符串，所以要解决这个问题，您可以将代码更改为：

export default function Home() {
    const countries = JSON.parse("{\"data\":{\"countries\":[{\"name":"Canada\"}]}}")
    return (
        <pre>{JSON.stringify(countries)}</pre>
    )
}

记得转义引号！对文本使用单引号不被认为是有效的 JSON。

推荐阅读