Как передать массив строк в строковый литерал?

Question

У меня есть объект json в строковом литерале

chartOptionsStr = `{
    "chart": {
      "type": "line"
    },
    "title": {
      "text": ""
    },
    "subtitle": {
      "text": ""
    },
    "xAxis": {
      "categories": ${categories},
      "labels": {
        "align":"right",
        "rotation":"0"
    }
    },
    "yAxis": {
      "title": {
        "text": "Number of Messages"
      },
    "tickInterval": 5
    },
    "plotOptions": {
      "line": {
        "dataLabels": {
          "enabled": false
        },
        "enableMouseTracking": true
      }
    },
    "series": [{
      "name": "Sent",
      "data": [37.0, 26.9, 30.5, 47.5]
    }, {
      "name": "Delivered",
      "data": [27.0, 16.9, 20.5, 37.5]
    }, {
      "name": "Open",
      "data": [27.0, 16.9, 20.5, 37.5]
    }]
  }`;

В этом объекте мне нужно передать массив категорий

["19.Dec","12.Jan","15.Feb","28 Mar"]  as a dynamic value using ${categories}

Но проблема в том, что когда я утешаю это chartOptionsStr вывод его ниже:

{
    "chart": {
      "type": "line"
    },
    "title": {
      "text": ""
    },
    "subtitle": {
      "text": ""
    },
    "xAxis": {
      "categories": 12.Dec,18.Dec,20.Dec,1.Jan,
      "labels": {
        "align":"right",
        "rotation":"0"
    }
    },
    "yAxis": {
      "title": {
        "text": "Number of Messages"
      },
    "tickInterval": 5
    },
    "plotOptions": {
      "line": {
        "dataLabels": {
          "enabled": false
        },
        "enableMouseTracking": true
      }
    },
    "series": [{
      "name": "Sent",
      "data": [37.0, 26.9, 30.5, 47.5]
    }, {
      "name": "Delivered",
      "data": [27.0, 16.9, 20.5, 37.5]
    }, {
      "name": "Open",
      "data": [27.0, 16.9, 20.5, 37.5]
    }]
  }

Массив строк, добавляемых как одно значение.

Есть ли у какого-нибудь органа решение для этого?

Я пытаюсь получить категории старших карт из службы угловой.Так что это значение является динамическим.

Answer 1

Если вы решили реализовать это поведение, вы можете использовать:

const categoriesStr = `["${categories.join('", "')}"]`;
...
"xAxis": {
  "categories": ${categoriesStr},
   ...
}

Answer 2

Почему вы делаете JSON строкой?

Вы должны создать JSON как обычный объект;

chartOptionsJson = {
  "chart": {
    "type": "line"
  },
  "title": {
    "text": ""
  },
  "subtitle": {
    "text": ""
  },
  "xAxis": {
    "categories": categories,
    "labels": {
      "align":"right",
      "rotation":"0"
  }
  },
  "yAxis": {
    "title": {
      "text": "Number of Messages"
    },
  "tickInterval": 5
  },
  "plotOptions": {
    "line": {
      "dataLabels": {
        "enabled": false
      },
      "enableMouseTracking": true
    }
  },
  "series": [{
    "name": "Sent",
    "data": [37.0, 26.9, 30.5, 47.5]
  }, {
    "name": "Delivered",
    "data": [27.0, 16.9, 20.5, 37.5]
  }, {
    "name": "Open",
    "data": [27.0, 16.9, 20.5, 37.5]
  }]
};

Тогда вам не нужно переносить переменную категорий как ${categories} при внедрении в массив, вместо этого просто передайте переменную непосредственно в объект.