无法将我的 GRAPHQL 响应转换为可迭代的 JSON 格式

Question

所以有点背景。我正在对 shopify 的 graphQL api 进行 GRAPHQL 调用。我正在取回数据（耶！）并且它是正确的（双重耶！！），不幸的是，除了查看数据之外，我无法对数据做太多事情 - 我无法使用常规 JSON 语法遍历它。我的计划是将数据放入 javascript 生成的 HTML 元素中以显示给用户，例如生成包含 titles/pictures 产品的列表。

废话不多说，我的代码。

第 1 步：响应我的按键的 JS 函数和运行异步获取：

function ajaxProductSearch(shopCode){
    let devSearch = document.getElementById('product_search_dev');
    devSearch.addEventListener("keyup", () => {
        shopCode = document.querySelector(".langTab.active input").value;
        showGraphQL(shopCode, devSearch.value);
    });
}

第 2 步：我对 php 脚本的异步提取调用

async function showGraphQL(shopCode, search){
    const response = await fetch(`../models/ajaxcall.php?shop=${shopCode}&searchString=${search}`);
    const graphQL = await response.json();
     console.log(graphQL);
}

第 3 步：我的 php 脚本本身运行使用 curl 完成 graphQL 调用

3a: The curl function

function graphQLCall($qry, $endpoint, $flag=''){
        $headers = array();
        $headers[] = 'Content-Type: application/graphql';
        $headers[] = 'X-Shopify-Access-Token: '.$authToken;

        $ch = curl_init();

        curl_setopt($ch, CURLOPT_URL, $endpoint);
        curl_setopt($ch, CURLOPT_RETURNTRANSFER, 1);
        curl_setopt($ch, CURLOPT_POSTFIELDS, $qry);
        curl_setopt($ch, CURLOPT_POST, 1);
        curl_setopt($ch, CURLOPT_HTTPHEADER, $headers);
        curl_setopt($ch, CURLOPT_Header, 1);

        $result = curl_exec($ch);
        curl_close($ch);
        if (curl_errno($ch)) {
            echo 'Error:' . curl_error($ch);
        }
        
        $graphQL = json_decode($result);
        if($flag == ''){
            return $graphQL;
        } elseif($flag == 'flag'){
            return $result;
        }
    }

3b：为 graphQL 函数准备查询的代码 $query1使用$_POST[]从前端获取$searchString到后端

        $query1 = '{
  products(first: 25, query: "title:'.$searchString.'") {
    edges {
      node {
        id
      }
    }
  }
}';
$mediaID = graphQLCall($query1, $endpoint);

$query1 通过 graphQLCall() 传递，然后它的响应，即产品的 id 被传递到第二个查询中，然后调用产品本身： php 脚本的 3b：

    foreach($mediaID->data->products->edges as $a){
        // echo $a->node->id;
            $query2 = '{
  product(id: "'.$a->node->id.'") {
    id
    title
    images(first:1) {
      edges {
       node {
         originalSrc
         id
       }
      }
    }  
  }
}';         
            array_push($graphQLArray, $query2);
        }

然后它将响应推送到一个数组中，因此我得到了一个充满具有正确产品 ID 的查询的数组。接下来迭代该数组以调用产品本身。 php 脚本的 4b：

$restCallArray = array();
    foreach($graphQLArray as $t){
        array_push($restCallArray, graphQLCall($t, $endpoint, "flag"));
    }
    $json = json_encode($restCallArray);
    print_r($json);

我的 php 脚本的最后一步是 print_r($json);

然后由我的异步 showGraphQL() 函数处理；写在上面。

当我 post 到 innerHTML:

时，我的异步获取响应是这样的

{"data":{"product":{"id":"gid:\/\/shopify\/Product\/6736442654756","title":"Cactus Sneaker Women","images":{"edges":[{"node":{"originalSrc":"https:\/\/cdn.shopify.com\/s\/files\/1\/0009\/8421\/9684\/products\/76-10-49321-548_1.jpg?v=1631627733","id":"gid:\/\/shopify\/ProductImage\/28632222433316"}}]}}},"extensions":{"cost":{"requestedQueryCost":4,"actualQueryCost":4,"throttleStatus":{"maximumAvailable":2000.0,"currentlyAvailable":1996,"restoreRate":100.0}}}},{"data":{"product":{"id":"gid:\/\/shopify\/Product\/6736442687524","title":"Cactus Sneaker Men","images":{"edges":[{"node":{"originalSrc":"https:\/\/cdn.shopify.com\/s\/files\/1\/0009\/8421\/9684\/products\/76-10-49322-548_1.jpg?v=1631627827","id":"gid:\/\/shopify\/ProductImage\/28632226070564"}}]}}},"extensions":{"cost":{"requestedQueryCost":4,"actualQueryCost":4,"throttleStatus":{"maximumAvailable":2000.0,"currentlyAvailable":1996,"restoreRate":100.0}}}}

上面的响应是完全正确的，但是，当我尝试将它放在 html 元素中时出现问题，例如：graphQL[i].data.product.id 我收到 undefined。这是我的问题，我无法正确地遍历看似 JSON.

的内容

我是 graphQL 的新手，一般来说 API 是新手，所以非常感谢您的帮助，很抱歉这么长篇大论，我希望 question/problem 很清楚，代码也很清楚也是。

布加布加

Answer 1

以防万一以后有人发现这个问题并遇到同样的问题。离开@morganney 所说的，我收到了一个对象。所以根据我的逻辑，这不是你想要带领你进入战斗的逻辑，但无论如何，我需要使用 JSON.parse() 将这个对象解析为 JSON 所以。我没有更改我的 PHP 脚本，而是我的 JS async graphQL() 这是我编辑的 async GraphQL() func

async function showGraphQL(shopCode, search){
    const response = await fetch(`../models/ajaxcall.php?shop=${shopCode}&searchString=${search}`);
    const graphQL = await response.json();
     for(let i = 0; i < graphQL.length; i++){
         let graphQLJSON = JSON.parse(graphQL[i]);
         console.log(graphQLJSON.data.product.id);
     }
}

令人困惑的是，我遍历 graphQL 变量，并对其调用 JSON.parse(graphQL[i])，然后我能够 console.log 现在 JSON 的特定值。

我希望有一天这对某人有所帮助，并感谢发表评论的人。

布加布加

无法将我的 GRAPHQL 响应转换为可迭代的 JSON 格式

Cannot get my GRAPHQL response into an iterable JSON format

javascript

php

fetch

graphql