从文件路径解析JSON无法正常工作

Question

我正在尝试迭代解析JSON文件列表。使用PHP，我设法将JSON文件列表直接编译为单个JSON对象。现在，我想解析每个对象，并以HTML格式输出每个对象的属性。我确定我最初传递的JSON可以正常工作。有任何想法吗？这是错误和功能。

$(document).ready(function(){
    console.log("something")
    for(var i = 2; i < Object.keys(jsTrips).length; i++){
        var data_file = "http://localhos:8080/trips/" + jsTrips[i];
        var currTrip = JSON.parse(data_file)
        document.getElementsByClassName(i).innerHTML = currJSON.start_time;
    }
    console.log("finished") 
});

忽略本地主机中缺少的t。即使改正了错字，问题仍然存在

提前谢谢！

更新：

Javascript对象jsTrips的格式如下：

{2: name.json, 3:name.json, 4:name.json}

jsTrips中命名的JSON文件的格式如下：

{start_time: some start time, coords: [{lat: ##, long: ##}, {lat: ##, long: ##}...], end_time: some end time}

Answer 1

要解决该错误，您将看到：

  

SyntaxError：JSON.parse：第1行第1列的意外字符

JSON.parse()方法解析一个JSON字符串，构造该字符串描述的JavaScript值或对象。您在向其提供[或{ {1}}作为第一个字符。因此{会导致语法错误。

假设您在代码中的某个位置定义了对象h，而这是一个更基本的对象，我建议如下：

jsTrips

此代码还假定存在具有$(function(){ console.log("Start jsTrips"); var i = 0; $.each(jsTrips, function(k, v){ if(i >= 2){ $.getJSON("http://localhos:8080/trips/" + v, function(data_file){ $("." + i).html(data_file.start_time); }); } i++; } console.log("Finished"); }); 之类属性的HTML元素。最好使用Objects示例和返回的JSON示例更新Post。

现在，如果对象的索引是类名，则它看起来可能更像：

class="2"

再次，需要知道您要发送的内容以及希望返回的内容。

  

jQuery.getJSON（）使用GET HTTP请求从服务器加载JSON编码的数据。

查看更多：https://api.jquery.com/jquery.getjson/

更新

现在通过$ .getJSON（）使用JSONP方法，这将有助于解决CORS：

$.getJSON("http://localhos:8080/trips/" + v, function(data_file){
  $("." + k).html(data_file.start_time);
}

$(function() {
  var jsTrips = {
    2: "file-1.json",
    3: "file-2.json",
    4: "file-3.json"
  };
  console.log("Start jsTrips");
  $.each(jsTrips, function(k, v) {
    var url = "http://localhos:8080/trips/" + v;
    console.log("GET " + url);
    $.getJSON(url + "?callback=?", function(json) {
      $("." + k).html(json.start_time);
    });
  });
  console.log("Finished");
});

如您所见，这将按预期从<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>构建新的URL。您可以直接从JSON获取jsTrips。当需要JSON时，您无需解析它。

关于新的CORS问题，这更加复杂。基本上，您不会调用相同的URI，因此浏览器可以保护自己免受外部代码的攻击。<​​/ p>

  

跨源资源共享（CORS）是一种机制，该机制使用其他HTTP标头来告诉浏览器，使运行在一个来源（域）上的Web应用程序有权访问来自另一个来源的服务器中的选定资源。当Web应用程序请求其来源（域，协议和端口）与其来源不同的资源时，它将发出跨域HTTP请求。

     

跨域请求的示例：start_time所提供的Web应用程序的前端JavaScript代码使用http://domain-a.com发出对XMLHttpRequest的请求。

     

出于安全原因，浏览器限制了从脚本内部发起的跨域HTTP请求。例如，http://api.domain-b.com/data.json和Fetch API遵循同源策略。这意味着使用这些API的Web应用程序只能从加载该应用程序的相同来源请求HTTP资源，除非来自其他来源的响应包括正确的CORS标头。

查看更多：https://developer.mozilla.org/en-US/docs/Web/HTTP/CORS和https://www.sitepoint.com/jsonp-examples/

如果您无法更改用于目标JSON文件的端口（我怀疑正在创建CORS问题），则可以考虑使用JSONP方法与GET方法。 评论一下，让我知道是否是这样，我可以更新答案。更新中包含示例。

希望有帮助。

Answer 2

这可能不是一个完整的答案，因为我不太了解这个问题。但这也许会有所帮助。

您告诉我们您用PHP从几个JSON文件中编译了一个文件，通常，如果您在JSON文件中有对象，那么如果您有数组，它将看起来像{...一些键值...}在那里，将是[...一些键值...]。

因此，当您将带有对象的多个文件编译为一个文件时，您将获得{...一些键值在这里...} {...一些键值在这里...}，而JSON不知道如何解析它们，将抛出错误：

console.log(JSON.parse('{"key": "value"}{"key": "value"}'))

这将正常工作，那里只有一个对象：

console.log(JSON.parse('{"key": "value"}'))

因此，如果出于某种原因您确实需要将多个JSON文件编译为一个，则有一种解决方案-使用新行作为分隔符来生成这样的文件。比起JS，您可以用新行分割文件，并解析每一行而没有问题。

像这样：

const arrayOfJSONs = Array(10).fill(null).map((_,i) => JSON.stringify({key: i, keyXTen: i * 10}))

// then you join them in one big file with \\n new lines as separators
const oneBigFile = arrayOfJSONs.join("\n");
console.log("oneBigFile:\n", oneBigFile)

// on the client you get your one big file, and then parse each line like so
const parsedJSONs = oneBigFile.split("\n").map(JSON.parse)
console.log("parsedJSONs\n", parsedJSONs)

Answer 3

JSON.parse接受string输入

Javacript fetch

$(document).ready(function(){
    console.log("something")
    for(var i = 2; i < Object.keys(jsTrips).length; i++){
        var data_file = "http://localhos:8080/trips/" + jsTrips[i];
        fetch(data_file).then((res) => res.json())
        .then((currJSON) => {                  
            // document.getElementsByClassName(i).innerHTML = currJSON.start_time;
            // update your DOM here
        })
    }
    console.log("finished") 
});

jQuery $.getJSON

$(document).ready(function(){
    console.log("something")
    for(var i = 2; i < Object.keys(jsTrips).length; i++){
        var data_file = "http://localhos:8080/trips/" + jsTrips[i];
        $.getJSON(data_file, (currJSON) => {
            // document.getElementsByClassName(i).innerHTML = currJSON.start_time;
            // Update DOM here
        });
    }
    console.log("finished") 
});