Leaflet L.geoJSON from a js variable geojson object not showing on map

Question

I create a js geojson object variable in my code. I would like to then create a layer based on the geojson variable and add to the map. I have tested the geojson object (When I stringify the geojson object the geojson maps correctly in various web geojson mappers). If I place geojson into a file with var geojson = {...} and then run. It appears on map correctly

My code runs without throwing errors, but the layer does not appear on map.

   //****  Ive tried several options same result 

   //    var json_Converted1JSON = new L.GeoJSON(geojson.returnJSON,{
   //   var json_Converted1JSON = new L.GeoJSON.AJAX([geojsonx], {
   //  var json_Converted1JSON = new L.GeoJSON.AJAX([geojson], {
      var json_Converted1JSON = new L.geoJSON.ajax([geojson], {
        dataType:'jsonp',
        pane: 'pane_Converted1',   

    style: doStyleConverted1,
   pointToLayer: function (feature, latlng) {
            return L.circleMarker(latlng, geojsonMarkerOptions)

         },   
      onEachFeature: pop_Converted1,

.....

My geojson object and l.geoJSON layer variables show the following values:

Any suggestions welcome. Also, is there a way to add "var geosjon =" as a string to my js geojson variable object?

Geojson file string below:

{"type":"FeatureCollection","features":[{"type":"Feature","geometry":{"type":"Point","coordinates":[-122.248391,44.13595817]},"properties":{"SiteId":"14159500","Name":"SOUTH FORK MCKENZIE RIVER NEAR RAINBOW, OR","Flow":"336","DateTime":"2018-04-02T08:00:00.000-07:00","PerFlow":8}},{"type":"Feature","geometry":{"type":"Point","coordinates":[-122.3331192,44.16234819]},"properties":{"SiteId":"14162200","Name":"BLUE RIVER AT BLUE RIVER, OR","Flow":"107","DateTime":"2018-04-02T09:15:00.000-07:00","PerFlow":2}},{"type":"Feature","geometry":{"type":"Point","coordinates":[-122.47062,44.1248487]},"properties":{"SiteId":"14162500","Name":"MCKENZIE RIVER NEAR VIDA, OR","Flow":"3490","DateTime":"2018-04-02T09:00:00.000-07:00","PerFlow":78}},{"type":"Feature","geometry":{"type":"Point","coordinates":[-122.9196644,44.059348]},"properties":{"SiteId":"14164700","Name":"CEDAR CREEK AT SPRINGFIELD, OR","Flow":"21.2","DateTime":"2018-04-02T07:45:00.000-07:00","PerFlow":0}},{"type":"Feature","geometry":{"type":"Point","coordinates":[-122.9645273,44.0712365]},"properties":{"SiteId":"14164900","Name":"McKENZIE RIVER ABV HAYDEN BR, AT SPRINGFIELD,OR","Flow":"4470","DateTime":"2018-04-02T09:15:00.000-07:00","PerFlow":100}}]}

Answer 1

As pointed out by @TomazicM, assuming you are using the leaflet-ajax plugin, the problem is probably your syntax, which should be (assuming your json file is named "Rivers.json") and is in the same directory as your index.html:

var geojsonLayer = new L.GeoJSON.AJAX("Rivers.json"); 

This worked for me with the JSON you shared:

Regarding your second question, to load this json as a js variable object, do the following:

1) Open your JSON file and edit it, add the following to its very beginning: var geojson=

2) Save this as a new JavaScript file (*.js)

3) Load this in your html like so:

<script src="Rivers.js" type="text/javascript"></script>

4) You should then have access to the geojson variable in your JavaScript.